Stealth Link from RWExtras is a link that doesn't always link to the page that you'd expect it to. A normal click will take you to a perfectly innocent page – your portfolio, perhaps. However, if you click and hold a Stealth Link for a couple of seconds (4 seconds being the default), it can take you somewhere completely different. A members login page for instance, or a download area – the choice is yours.
Once you open the Stealth Link settings panel, you'll only find two settings: Hold Length and Destination Link (your hidden page). Drop a text container into Stealth Link and apply a normal link to some text and your clandestine link is ready to be clicked or held.
Give your visitors detailed cues when they hover over a link, with Super Tooltips. A great way either to let them know where a link will lead them or even to explain part of a text.
I moved the Tooltip in the first screenshot it would normally be positioned exactly below the linked text.
Let's take look at how Super Tooltips works. In the settings panel, you'll first find Custom IDs that will allow you to format links for tooltips elsewhere on your page. This will allow you to add just a single Super Tooltips stack to the page and to use its settings over multiple text or paragraph stacks. To do so (using the default settings), add 'customClass a' to the Custom Class section of your text container and in the URL panel, add an id with '#customid a'. Then add your hint as described below.
Below the IDs, there is an option to display the tooltips with or without an arrow. Next, you can set the Max. Width for the tooltips. Below Max. Width you will find Tooltip Animation settings. The tooltip can Fade in, Grow (default), Swing in, Slide, or Fall in. However they appear, they certainly can't be missed.
Tooltip Side sets where the tooltips appear: Top, Bottom (default), Left, or Right. And finally, you'll find a choice of six different Tooltip Themes for the appearance of your hints.
If you want the links to link to a specific URL, you need to add the link to your text as you normally would. To add a hint, you need to add the hint text into the Value field next to the Title. If you need a hint, but don't wish to link to an URL, just leave the URL field empty.
If you have a page with 'chapters' and would like each chapter to have its own Super Tooltips formatting, you may add multiple Super Tooltips stacks to a page, each with a different setting. But don't overdo it – you'll confuse your readers.
Oh, and if you're wondering why the links in my screen shots stands out so boldly, that's LinkEffectThing, but that was the subject of a completely different review.
RWExtras' Line Graph is the ideal stack to display any sort of progression. Line Graphs are boring, right? So how about an animated Line Graph? The more information you add, the more valuable the information that your visitors will ascertain from it.
Line Graph is a really simple stack to use. When you place it on your page, you won't see anything but a set of instructions. However, if you set a path to a CSV file in the settings panel and then switch to preview mode – voila – you have a chart that displays all of the information contained within that CSV. The progress of your project's donations could look like this:
You'll notice that some information is visible over 2015/6. This information is displayed for each part of the graph when your mouse hovers over it. In this case it contains details of each donation and the total reached for the date.
Have more information that you wish to show? Are your investors interested in your sales records for the current month?
This chart shows when and where a sale was made, when the customer account was created, when the customer last logged in to his account and, of course, how much was paid.
Both of the above charts were created with Line Graph with almost zero configuration.
But the settings panel allows quite a bit of configuration: First, as already mentioned, you'll need a CSV file. You can then set an URL to load the file either from your server, or from your Resources folder. Once you've read the setup instructions, you probably won't want them displayed in your layout, so deactivate Display Instructions.
Now you can decide if the curves on your chart should be filled with colour [Filled Graph], and if the curves should be smoothed [Line Smoothing]. Next come Stacked Graph, Stepped Points and Connect Separate Points. The settings can all be played with in preview mode and the changes are immediately visible.
Once you have your curves displaying as you want them, you can set your Graph Height and Title, including the titles Size and Colour. Your X and Y Axes will also require Titles and Render Grid Lines places a grid behind the chart – Now set the Colours for the Axes Titles and the Axis Lines.
The Legend that is displayed (the additional information contained within the CSV file for each project state) is set to Always by default. In this case the legend is fixed to the top right hand corner of your graph and changes as you move your mouse along the curves. With On Mouseover set, the legend is only displayed when the mouse enters the graph. Follow causes the legend to follow the mouse along the curve and None hides the legend completely.
You can add Highlight points to your chart and set their size, then you can set the colours for each of the progress lines; there are colour options for up to five different graphs. The final settings are for the Stroke Width and the Stroke Colour.
RWExtras' Line Graph will enhance the display of your financial records, your project's progress, weather data from the last ten years, or whatever else you can pack into a CSV file, in an informative fashion and has the advantage of being extremely simple to set up.
CSV To Table
Once again, all you need to do is link a CSV file in the settings panel and your file will be displayed in a clean table. CSV To Table automatically assumes that the first row of information is a header and underlays the first line in the table with colour, this can of course be changed in the settings panel.
This is part of the same content as the donations chart above.
The first setting in the settings panel is CSV File (set link); the second setting is (minimum) Column Width. As CSV To Table isn't a responsive stack, you'll need to play around with the Column Width, if you wish to display your data on a smaller screen. CSV TT will match its visible width to fill the container it is in; if your CSV contains mor information than can be displayed on the screen width, a scrollbar will appear underneath the table – you may want to make sure that your most important data is contained in the first columns! CSV TT's height is governed by the number of rows in the file.
The settings that follow, govern the cell Borders, The Border Size and the Border Colour. The Borders can be set to All Sides (default), Table Box Only, Horizontal, or Vertical.
The Table Fill can be set to None (default), Alternating Rows, Alternating Columns, or Solid, with options for the Colours. The (cell) Alignment is set to Left by default and the Cell Padding to 10px. The next settings are forFont Size, Line Height and (font) Colour.
Next we come to the CSV To Table Header Settings which allow for Bold Text, Disable Borders, Italic Text and the same text controls as for the cells. The First Column may also be treated as a header and has the same control settings as Header Settings once it is activated.
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!
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!
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.
I know that, for some of you, this is old hat, but if you haven't taken a look at BWD's Sections Pro yet, I recommend that you do so immediately – it opens up a completely new design world. One that wasn't available to RW users previously.
Of course, you could set up variable width, responsive columns and build chequered pages, but Sections Pro is much more than that. As Andrew writes on the product page, Sections Pro isn't complicated, but it is rather like purchasing a new car. You can jump inside and drive off with it straight away, but it may take you months to discover what all the knobs and buttons inside do and if the hype about fuel consumption was accurate or not.
My first steps with Sections Pro were, as already mentioned, hampered by an unstable application that didn't seem to do what I wanted it to do. I even contacted Andrew to see if I'd missed something. As it turned out. I hadn't – it was just a misbehaved app.
I've always liked diagonals as design elements. These were previously difficult to create and involved transparent .pngs, which were challenging when it came to create overlapping elements.
Enter the Sections Pro suite.
As I say, diagonals. That's what I jumped in with. I envisaged a design with overlapping diagonals at the top of my page and a text container that overlapped them.
Sections Angle to the rescue! I quickly discovered that I needed an empty, responsive stack at the top of the page to square off my top diagonal. I wanted three columns with different gradients within the diagonal, similar to the Stripe pages. Sadly, that is not yet possible (Andrew?). O.K, I can accept that, let's press on.
A second, smaller diagonal was quickly added, moved up to overlap the first and then moved below the top diagonal using the z-Index. So far so good. But what about the overlapping text box?
A standard Sections Pro stack quickly solved that problem. A margin with a minus value moved the box up to where I wanted it and the with a little motivation from the z-Index settings, it appeared above the diagonals.
Feeling adventurous, I decided that I would add a Headline that moved up and faded as the page was scrolled. That was quickly achieved with Header Pro and Scroll Mate – both BWD stacks.
But what about an animated image caption?
A Sections Box quickly answered that question. One Sections Pro stack with a Child Stack [background image], a Sections Box inside the Sections Pro stack containing the image caption. A second Child stack added to the Sections Pro box to animate the Sections box and Robert is your father's brother!
All that remained now was to position my site logo over the Foundation Top Bar. Once more, the solution was a Sections box inside a Columns stack with the appropriate proportions. You can also add negative values for the Sections Box Margins and alter the z-Index until the Box is positioned exactly where you want it.
With the exception of the menu bar and a responsive columns stack, the example above was built entirely with BWD stacks. You can explore Sections Pro for months on end, and you'll continue to find new possibilities — an amazing suite of stacks. I highly recommend that you download them and begin your exploration straight away, but don't forget to add a little coffee money to Andrew's kitty before you leave the BWD site.
If you'd like the example project from this rapid-run-down (which comes nowhere near doing Sections Pro justice – I've only been using it for a week) then please feel free to drop me a line.
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
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.
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—16