Clicky

RapidWeaver Stacks, PlugIns, Themes ...
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Typed – Tickertape Reinvented

In the very early days of the web, many sites would display a tickertape message somewhere on the page. Said pages often had a black background and the tickertape text was neon green. It looked awful (IMHO), but the fashion persisted for many years. Many years – even today there are tickertape stacks available for RapidWeaver.
Weaver's Kingdom has just released a stack called Typed. It's a modern version of tickertape and is actually useful.

You never heard of Weaver's Kingdom? You must have, it's been online for weeks now and is the rebranded Archetypon from Lucas Tsolakien.

Tickertape is considered useful, because it can display large amounts of text within a very compact space. It is often used to display upcoming events.
Typed takes the idea to a new level. Instead of a constant stream of text running across your screen, Typed types text, deletes, or untypes it and then types a fresh text in its place.
My first thought was "Duh! Not another one!", but then I took a look at a couple of examples and changed my opinion.

Lets say you have a number of different products or services available. You could type a list such as:
We Design Websites
We Design Logos
We Design Print Products etc, etc.

Or you could position your text "We Design" and let Typed fill in the blanks at intervals of a second or two.
You've got your message across and, because it's animated, it gets noticed and – it saves a lot of space.

Typed

Stack settings
When you drop Typed onto a Stacks page, you'll see a text container with a + button to add child stacks.
Type your text alternatives into the containers and add, or delete child stacks as needed.
In the settings panel, you can set the Typing Speed and the Start Delay. You may choose to Shuffle your texts and set the Back Speed [untype] and the Back Delay.
You will probably want the text display to Loop [repeat], but this option may also be deactivated.

Typed 'types' your text across the screen, so by default it displays a cursor. Show Cursor can also be deactivated.
The next settings are for the text formatting. Override Styles, [Text] Colour, Bottom Border [underline] and Border Colour.

Note: I haven't actually been able to test Typed for myself, so I'm unable to say what the final setting Detach does.

Typed re-invents and modernises tickertape and makes it a lot more appealing than it used to be.
Take a look at the demo sites at the bottom of Lucas' product page and see for yourself.


Comments

Dispatching Messages - Antique Text

If you'd like to present a special message to visitors arriving from specific websites, Marathia's ReferMessage stack will be just the thing you're looking for. If you'd like that message to look as if it came off an old and worn letterpress, then Jeroen's annual giveaway is the ideal addition.

ReferMessage

ReferMessage let's you post specific messages to visitors arriving from other sites. A different message for each site. You can present the message as a splash screen, an introductory message text, or even sneak it in with your main body text. It will only be visible to visitors arriving from the sites that you have stipulated. Quite an interesting idea.

Let's say that you have a special offer posted on special-deals.com. You can post a message on your linked page to greet visitors that clicked the link on special-deals and include a code to retrieve your offer. Visitors that find your site by chance or come from other websites won't see the offer or the code. You could add a second message and a new code for visitors from daily-deals.com, perhaps with a different price. A good way to track the effectiveness of your A/B tests.

So how does ReferMessage work? I assure you – there's no witchcraft involved. Simply drop the stack onto your page, add whichever stacks you wish to display into it and then consult the settings panel. You will find a checkbox to Show in Preview Mode and a field to enter your Referring URL. If the name of the website is specific enough, you only need to enter part of the address. 'google', for instance, will load ReferMessage for any visitors coming from a google search. 'rapidweaver' is fine if you want visitors from rapidweaver.ninja or rapidweavercentral.info to see your message, but not specific enough to exclude one, or the other.

If you wish to display where the visitor arrived from within the ReferMessage text, you must activate Use URL in Text and add the tag <span id=’[unique ID]’></span> to the text. The Unique ID refers to the ID you must add to the next field in the settings panel.

So what's this Unique ID stuff? Well, as already mentioned, you want to display a unique message to some of your visitors. Each message requires its own ReferMessage stack and each of these stacks must have a unique ID to differentiate them.


Antiquify

Jeroen's Antiquify stack is his traditional free stack for 2016's Xmas period. It does nothing more than make text look as if it were printed on an old letterpress. The effect is random and looks different each time the page is loaded. The poster above was created with Antiquify using the same 'Aref Ruqaa' font as the 'CAMPBELL'S Soup Ad' text. You'll notice that the text looks bolder – as could often happen when the printing plates were freshly inked – and some of the letters have irregular weights. In some cases Antiquify can present your text with too much, or too little ink; too much, or too little pressure from the printing plate and with letters displaced.

There are two ways to set up the stack. Method one is simple enough. Add your text to the stack. Publish. Finished!
Finer fonts work better than bolder fonts. Serifs work better than sans serif. You might want to drop Antiquify into a Font Stack to define your font.

Method two. Add a Unique ID to Antiquify and use the same ID for any text stacks that you wish to change the appearance of. The Screenshot above uses method two.

More about the screenshot: The whole layout was created inside a ReferMessage stack and would hypothetically appear, if the page were visited from the Ninja News page. The right half was created with the addition of two paragraph stacks, each with an Antiquify ID.

ReferMessage is a useful stack for presenting targeted messages, or evaluating A/B tests. I especially like that it can be set within the body content, allowing a page's text to change depending on where the visitor arrived from. Antiquify is a fun stack and, if used thoughtfully, could be ideal for presenting quotes or other text snippets. Don't overdo things though, Antiquify has a few limitations (see the demo page)!

Comments

RWExtras – Gutenberg & Layerz

Johannes Gensfleisch, better known as Gutenberg, was the German blacksmith/goldsmith who introduced movable type to European printing and is the father of the modern printing industry. Like the scribes before him, he realised that large texts require a smaller printed area if displayed in columns. Type set in columns is also easier to read. What better name, then, for a stack that automatically divides your text into columns?
Gutenberg

RWExtras' Gutenberg stack has been completely reworked for Stacks 3. It is as simple to use, as it is elegant, but it also has a wealth of features to render it completely responsive.

Simplicity: Drag Gutenberg onto a page and paste your text into it. Hit command + R to render/preview the page and you will find that your text has elegantly been divided up into four columns of equal height, with dividers between each column.


Could that be any simpler? I don't think so. You'll also find that if you reduce the width of your page, the text automatically reflows to fit the new width. The text content reflows to match the new column heights. Whilst reducing the screen width further the number of columns is reduced until, when finally reaching the mobile width, only one column remains.

Responsiveness: The settings panel contains the magic behind the transition. You will find the panel's settings reproduced four times. Once each for Small Screens, Mobile Screens, Laptop Screens and Desktop Screens, allowing Gutenberg's display to alter for each.

The very first setting is Content Type and can be set to HTML, Markdown, or Styled Text (default). Gutenberg renders each content type equally well.

The display settings that follow allow you to define the Column Count, the Column Gap (otherwise known as 'Gutter') and the Border (otherwise known as 'Divider' and not to be confused with the outer border) Weight and Colour. As already stated, these settings are repeated for each possible device. I found that there is nothing to be said against the default settings, however, if you don't like the dividers, you can set the Border Weight to 0 and reduce the Column Gap slightly.
No further settings are available. The emphasis is placed on simplicity.

Master Gutenberg utilised a number of tricks for one of his first books (The Gutenberg Bible). He implemented justified columns by using Ligatures, variable width Glyphs and Hanging Punctuation. Sadly, on the interweb, these are all things of the future. Whilst justified text is possible in RW, it usually doesn't look very good, so Gutenberg hasn't added it unless you include HTML tags.

The Gutenberg stack presents your text elegantly and highly readable on any device it is displayed on. 10+ forRWExtras!

Layerz

If you wish to layer multiple stacks, one atop of the other, I don't know an easier way than Layerz.
With the added advantage of Stacks 3, you can even fine tune your layered stacks in RW 7's preview mode.

The simplest application of layered stacks, is to position an image caption over an image, but Layerz allows to to place any stack you wish over any other stack. Heck, you can even place text over text if that is your fancy!

Layerz is a lot easier to use than some layering stacks I've encountered. I remember spending hours for one review, positioning my (two) stacks exactly as I wanted them. Not so with Layerz.

Drop Layerz onto a Stacks page and you'll be presented with a container for your base stack. You can drop any stack you like into this container – it will most likely be an image stack?

Now, lets say you wish to superimpose a caption text. Nothing easier than that! Click the + button below your main content and add a text container of your choice. In the example above, I added Headline Pro from BWD.
Next, you'll want to position the stack exactly where you want it. But let's first take a look at Layerz' main settings panel. There's not a lot that you will need to set here, but you perhaps you want Layerz to be placed inside your Theme Banner or in withinan Extra Content area? If so, you'll need to take a look at the Stack Placement settings.

Now click the Layer stack inside Layerz; there are many more settings available here. I didn't want my rather large headline to obscure the image on smaller screens, so I left the Breakpoint set to 768px. On screens of this size and smaller. my superimposed headline now slides down below the image.

If you wish, you can also rotate your layered stack by setting a value for its Rotation. The z-Index may also be important, depending on which other stacks are in Layerz' vicinity. You can also add a unique ID in case you need to target it with specific CSS formatting.

Now we get to the actual positioning of your superimposed layer. In Horizontal, you can set Left, Right, or Centre. Margin allows you to move the stack away from the edge of the main stack.
The Vertical positioning of your layer is set to Bottom by default, but you may also set Top, Middle, or Transformed Middle. I found that 'transformed' worked best for entering my caption.

By altering the Bottom settings, you can now move the layer up or down – I moved my caption up by 5%. The superimposed layer's width is set to Proportional by default, meaning that on smaller screens it will will retain its proportions in relation to the main stack. Auto, or Fixed may also be set. My caption is set to 70%. The layer's height settings are similar to the width settings, so that you have complete control over the layer size.
If your layer doesn't stand out against the background, you can choose Fill Layer to add a background. In my example, I set 40% (opacity) white. And finally, we have settings for Corner Radius, Layer padding, Text and Link Colours, Font size and Line height.

Want to add more layers? Just click the + button in the main stack and experiment to your heart's content.

As I said, Layerz is really simple to set up and is one of those cool tools for challenging layouts.

Comments

Typography in RapidWeaver

Typography from One Little Designer, Review By Rob Hall, CEO at rjh Web Design Rating: 5 out of 5. Typography – a suite of stacks that will let you customise a wide range of font settings.

Recently everything seems to be revolving around typography in RapidWeaver.
1LD's new suite of six stacks is even called Typography and allows an extensive range of font settings and effects.

The main stack – Typography Core – is a container which will enable most of the functions available; for instance, if you drop in the Font Importer, you can add Google Fonts, or local fonts to Typography's contents simply by adding the Google Font Name or the name of your local Web Font.

Typography-Core

Typography-Core's HUD will allow you to override each of your theme settings for any Div, Section, Article, Aside, Main, Header, or Footer. The settings available will override font and link colours, font sizes and link appearance. It will also let you set the line height and control responsive sizes, allowing fonts to display at specific sizes, conditional to five separate breakpoints. 

Typography-Headers provides settings to customise headers with customisation that includes not only the header alignment, but also the font weight for web fonts, letter spacing and stretch values – both horizontal and vertical.

Further, Typography-Headers also adds options to skew and rotate headers, add shadows and and allow headers to follow a circular path. With Marquee, a ticker-text effect can be added. Three Header Themes are also available for a Neon effect, Emboss and Overlap. Fluid Text is available as an alternative to responsive sizes and will allow the headline to fill its container depending on viewport size, with definitions for maximum and minimum sizes in px.

Typography-Text is even more versatile. Text may be set as a Paragraph, Blockquote, Address, Details or Div. When Details is selected, the text content appears in a dropdown. Drop Caps may be defined in px.

Typography-text can be set to Standard or Columns. Up to twelve columns may be selected with up to five breakpoints. The breakpoints have settings which allow you to define how many columns are displayed after the each breakpoint is reached. A Rule – a vertical line – can be set between the columns.

Just as with Headlines, Fluid Text will allow fluid font sizes that will fill the text container's width. Shadows may, of course, also be added.

In addition to the above, Typography-Code – which doesn't need to sit inside the Core stack – lets you add code to your page in one of eight Themes and lets you choose between 24 code formats ranging from CSS to Visual Basic.

As if that were not enough, Typography-Buttons will place a button on your page in one of five different themes – Custom, Squishy, Ribbon, Glass and Alerts – each with a wide range of colour and rollover effects. The advantage of the Typography-Button stack, is that fonts may be set to match your web fonts.

Typography

Typography is currently, without a doubt, the most versatile stack available for font presentation. Some of the less obvious functions are well documented via the tooltips and in the extensive online tutorial.

Comments

Duplicated Text Formatting

TextPal from DeFliGra, Review By Rob Hall, CEO at rjh Web Design Rating: 5 out of 5. Text Pal's Servant Stack reflects any formatting made in the Master Stack.

In a similar vein to Click, DeFliGra's new TextPal comprises a Master stack and a Servant stack. That is – you format a Master and all Servants will mirror the Master's formatting. This will save a lot of time when adding text to a page that is to deviate from the standard theme settings, but will save a whole lot more time, if it is decided that the alternate formatting needs to be changed in any way.

TextPal Master is essentially a text stack, but this is a text stack with extensive formatting options.
The first option is to set a Group ID for the stack. Below the ID, you will find Wrapper options that determine the content alignment. The Bottom Border Outer will underline the stack and the Border Space adds padding underneath that line.

TextPal's Text Area allows comprehensive formatting of the text itself, whilst Columns will divide the stack into as many columns as you choose. The columns are responsive and text content reflows within the columns to maintain an equal height. This function alone is extremely valuable, but Tommy has even added a breakpoint that disables the columns below a certain screen width.

TextPal

A background colour can be configured for the text and with Bottom Border Inner, the background can be underlined. Then, of course, there are the Custom CSS settings that Tommy always includes.

Now, whenever you drop a TextPal Servant onto your page and set the same Group ID as a Master, the text content will automatically be formatted. Any alterations made to the TextPal Master will automatically be reflected in all corresponding Servant stacks.

At present, TextPal is included with Click at a ridiculously low price. Grab both stacks now, before Tommy changes his mind and turns TextPal into an independent stack with the price tag it deserves.

Comments

Show more posts

  • Stacks Image 35399
  • Stacks Image 35402
  • Stacks Image 35405
  • Stacks Image 35408
  • Stacks Image 35411
  • Stacks Image 35414
  • Stacks Image 35417
  • Stacks Image 35420
  • Stacks Image 35423
  • Stacks Image 35426
  • Stacks Image 35429
  • Stacks Image 35432
  • Stacks Image 35435
  • Stacks Image 35438
  • Stacks Image 35441
  • Stacks Image 35444
  • Stacks Image 35447
  • Stacks Image 35450
  • Stacks Image 35453
  • Stacks Image 35456
  • Stacks Image 35459
  • Stacks Image 35462
  • Stacks Image 35465
  • Stacks Image 35468
  • Stacks Image 35471
  • weaverthemes
  • Stacks Image 35477
  • Stacks Image 35480
  • Stacks Image 35483

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

x

Don’t miss a post!
Sign up for our monthly newsletter.

A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.

* indicates required

Contact Information

My Image

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—16

This website was built with loving care on a Mac using Foundation. For more information, contact me.