Back To Top is the stack that you'll need if you wish to build attractive buttons to send a user back to the top of a webpage, but don't want to use Photoshop to build sprites and don't want to do any complicated programming .
A choice of customisable options lets you create a button of just about any shape, size, position and colour. And a useful 'view generated source code' setting lets you copy the generated code quickly for reuse in non-Stack pages.
Back To Top General Settings
Placement - Fixed (default) Relative,
Position – Top/Bottom/Left/Right
Offset – Page scroll before active
Back To Top Styling
Content – Font Awesome Icon
Content Colour (Normal/Hover)
Animation – Time ms
Sizing - Width/Height
Background – None, Colour Fill, Gradient Diagonal 1/2, Gradient Horizontal, Gradient Vertical (default), Gradiant Radial, Image (Dragged and Dropped), Image (Warehoused)
Top/Lower Fill – Normal/Hover
Border – Normal/Hover
The very first checkbox in the Settings panel is View Generated Source Code. When the checkbox is activated, the HTML, the CSS and the JS output for your button for your newly created button will be displayed in preview mode. A single click in any of these fields will allow you to copy the code necessary for your Back To Top button to be included within non-Stacks pages.
Without a doubt, a useful stack to have in your collection!
iStack allows you to superimpose images, stacks and a caption over a background image. There are, of course, other stacks, or stack combinations that will allow you to do the same, but iStack drastically reduces the amount of work necessary for such a combination. All you need to do is drop your background image into iStack, add the second image and decide whether, or not you require an additional caption and stacks content. The standard stack settings make sure that you already have a perfect composition, but there's also room for creativity.
So, using one of the 62 (sixty-two) stickers that Tommy has thoughtfully provided as a design aid, let's take a closer look:
Drag iStack (I hope Apple won't contest the name) into a Stacks' page and in the stack settings, you'll find an image well for the main image and for the overlay (all images can be warehoused).
Once you've added an images into each of the image wells, you'll need to activate Show Front Image, otherwise iStack functions as a simple caption stack. You can now switch to preview and you'll find Tommy's sticker positioned in the middle of your image and a caption at the bottom right.
Returning to the Settings Panel, you'll also find options to deactivate the caption and to Add a DropZone. You can add any stacks of your choice to the drop zone.
The first options are Layer Images (active by default) and Switch Front/Back
Link And Hover – Add Link, Hover Opacity, Hover Hue, Scale (back img)
Back Image – Show Back Img (active by default) Image Resource, Fill Width, Greyscale
Front Image – (not activated by default), Image Resource, Width Settings, Margin Settings, Adjust Left/Right Margin, Opacity, Hue
Edit / Publish Crop (container) – Crop, Max Height, Adjust Margin
Caption – (activated by default), Note (caption container), Font Size, Line Height, Colour background/text, Shadow settings, Border, Position Settings
DropZone – (not active by default) When activated – settings for size, position and shadow.
Breakpoint – Settings to adjust size and position of Front and Back images, Caption size and position and the DropZone size and position below a breakpoint
As is usual for DeFliGra's stacks, advanced CSS settings are available for each of the containers.
iStack is ideal for superimposing two (or three) images and a caption, or two images and a text and is really simple to use.
Combining iStack with GoGrid (see Tommy's combined offer), a product page for multiple items with superimposed price or special offer is child's play.
The two examples above each have a background and front image, plus caption and stacks content.
A FAQs page immediately comes to mind, but Table Of Contents [TOC] can be used to build a complete page with article navigation.
TOC consists of two stacks and is simple to set up. Table Of Contents, the main stack, contains the complete setup for all TOC Article Child stacks, with the exception of the content type. The Content Type is individual for each child stack and can be set to Text (default) HTML, Markdown, or Stacks.
Once you've dragged the TOC 'master' stack onto your page, you can add title to the stack, then either drag in new content stacks from the Stacks' library, or simply click the + button to add a child stack. The TOC Content stack has a header area and a content area. When entering a header, it is automatically added to the contentlist.
The Content stacks may be dragged up or down inside the master stack, if you decide to change the order of your articles – the content list is then corrected accordingly.
It is possible to have more than one TOC stacks on your page.
When one of the Articles from the content list is clicked, TOC automatically jumps to that article and displays a progress bar at the top of the page. As you move down, reading the article, the progress bar indicates how much of the article has been read.
The clever thing about the progress indicator is – when you click the plus button at the top of the article, it opens the content list which now shows you which articles you have read and which articles you have yet to complete.
Once more, you will find an endless list of settings for TOC.
Suffice it to say that all aspects of the stack may be set to suit your preferences.
Background Colour, Icon size and colours, Header and Text Size and Colours, Line Height, and the list of Fonts that has become usual for 1LD stacks.
TubeWeaver is now at version 3. If you have version 2, you'll definitely want to update.
Version 2 from 2015 had no customisation options, version 3 changes that.
There's not a lot to explain about embedding a video on your RW stacks page.
Drag in TubeWeaver, insert the YouTube ID and that's it. There are, however, one or two settings that you might want to change.
First off, you'll want to set the YouTube Video ID. This is the code that appears at the end of the URL.
Player Colour – The new API allows you to choose between a Red, or a White progress bar.
Autoplay – is set to No by default.
Loop – is set to No by default.
Controls? – Is set to Display by default, but the controls may be hidden for a cleaner display.
Fullscreen? – When Deny is set, the video will not display any wider than the container that it is within.
Start At (s) – Set the starting point of the video, i.e. skip an intro sequence; get straight to the nitty-gritty.
TubeWeaver is quickly and simply set up. No bells and no whistles, but I personally find the Deny Fullscreen setting to be a useful feature.
Truncated, or 'read more' stacks are often used when a text is too long to display within a restricted space. Marathia's Truncator takes a different approach to most 'read more' stacks. Instead of expanding, when clicked, or hovered, Truncator displays the hidden text within a tooltip.
Truncator is ideal for displaying a two, three, or four line teaser text which can be displayed on hover.
There isn't a lot to set up for Truncator.
Number Of Lines – The default is set to 3.
Text Size – The default is 100%
You can set a Custom Text Colour, Bold & Italic, Alignment, Letter and Line Spacing and the Font Family.
Capitalise – Allows the settings Normal, Upper Case, Lower Case, Initial Case and Small Caps.
NOTE 1 – Truncator may not contain any HTML formatting! 2– JS must be activated for Truncator to work.
If you'd like your truncated text to open a new page when it is clicked, or a lightbox, BigLink will come to your aid.
BigLink is, well, a link stack. Any content that's dropped inside it may be linked to…
… a new section of the page, a lightbox, a URL, anything anything that is linkable.
E.G. Drop a teaser text from your latest Blog Post into a Truncator stack, drag Truncator into your BigLink Stack and add a link to your blog page.
On hover, your visitor can read more of the post and, when he/she clicks, will be whisked away to your blog page!
A Call To Action? Pack it into BigLink and have a lightbox open!
There are a few Link stacks available for RapidWeaver, but BigLink link has options that I haven't seen in any of them.
The first setting, obviously, is Set Link
Override Default Transition – when activated, Transition Speed is displayed. Set the speed in milliseconds.
Transitions? Yes, BigLink can change colours when hovered.
Activate Background Type Colour and/or Image and you can add a background to BigLink
When you choose Colour, you'll find colour settings for the four states Static, Hover, Active and visited.
The same settings apply to the stack's border. Obviously, if you add a background image, it will override the fill options.
BigLink Text And Icon Settings
BigLink will also allow you to set the text and Fontawesome colours for the four link states above.
BigLink also has multiple settings to allow you to override the font settings of the stack contained within it.
NOTE If the inner stack already has font settings, these settings may take precedence. That's just the way CSS works – the final stack to be read overrides all previous settings.
BigLink Image Settings
All images contained within a BigLink stack may have hover effect applied to them (does not apply to background images) during Static, Hover and Active states.
Opacity, Blur, Greyscale and Sepia. Browsers do not allow image effects for visited links.
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Subscribe to Ninja News
or ask a question
Yes, I would like to receive your monthly newsletter.
No thanks, I’m good for now. I have a different issue.
[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.
[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.
Thanks again for contacting us. Your request was successfully submitted.
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—17
Powered by rjh-design
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.