Tommy's new Stack Me stack will help you align your content flexibly, letting you break out of the constraints of the sometimes inflexible 12-column layouts of framework based themes such as Foundation and Foundry.
Stack Me adds a full width section to your page and let's you add child stacks with different content: Header, Text, Image, Float and Button. Stack Me's width may, of course, be constrained by dropping it into a container stack.
The Header, Text, Image and Button child stacks are straightforward, the Float stack adds a text stack with a container for other stacks. The child stacks can be combined as needed. The only thing missing is a child stack for third party stacks.
However, noticing that the child stacks are standard Stacks 3 stacks, I simply dragged in some other stacks – and was surprised to find that that works too.
Once you've added your choice of content, you may define Stack Me's minimum height and the content alignment, add an optional image background – which may be fixed – and a colour overlay. The setup is fast and simple and saves you the trouble of experimenting with nested stacks.
Fix Background Image – >1025 px On, <1025 px Off
Min Height – %
Vertical [orientation] – Top, Centre, Bottom
Horizontal – Left, Centre, Right
Padding – T, B, L, R – %
Colour On/Off – BG, Txt, Link, MO (Mouse Over)
Colour On/Off – H1—H4 individually
Colour Store – Tommy's famous colour reservoir. Save up to four default colours and drag them into the colour wells above
Target – Add an ID to scroll to the Stack Me container
Tile – Remove Min Height, 100%, My Choice [custom]
Custom CSS – it wouldn't be a DeFliGra stack without a bucket full of custom CSS containers
Stack Me is a great stack for when you need to align your content exactly where you want it, but with the addition of custom backgrounds.
Psychedelic can cycle through two to eight background colours. The colours can be as subtle, or as garish as you wish and the cycle time through all of the colours you choose can take as long as 100 seconds; i.e. the fewer colours you set, the more ethereal the colour change. The new colours subtly cycle into view first from the left and then from the right, so that if you do set all eight colours at the fastest speed, the name Psychedelic is appropriate – Think 'Lava Lamp'.
Psychedelic is advertised as 'Section Backgrounds', so whilst it is possible to reduce the section width by dropping Psychedelic into a container, the stack will ignore any settings for rounded corners.
Colour Count – 2 Colours, 4 Colours, 6 Colours, 8 Colours
Cycle Time – 10 Seconds–100Seconds
Preview Animation in Edit Mode
If you choose subtle colours and a long cycle time, you can keep your visitors guessing 'did the background colour just change, or not' with more intense colours and a shorter cycle time, you can easily draw attention to a text block, or to a call to action.
And I checked — if you want to go really crazy, you can combine Psychedelic with the text stack that I mentioned before, so that the text changes colour too.
Might be a bit much? That's entirely up to you.
I, for one, like Psychedelic when used cautiously.
I could, of course, have installed a script on this page that would keep the date above current and demonstrate exactly how 2day works but, as I'm on a tight schedule, I decided against it — too much work!
It would, however, have cost me just a few seconds to add Jeroen's 2day to the top of the page and to display a message with the date, formatted exactly as I wanted. But I no longer want to permanently display today's date. Been there, done that, didn't like the t-shirt any more.
With 2day, you can format your date exactly as you want it to appear, with custom text both before and after today's date, so that your message says exactly what you want it to.
Text before Date – Enter a prefix of your choice, e.g. 'Today is '
Item #1 – Name of Day, Name of Month, Day of Month 1–31, Day of Month 01–31, Year 2 digits, Year 4 digits.
After Item #1 – Divider of your choice, e.g. comma. slash etc.
The same settings are available for items 2–4, but include the option 'Do not use'
Text after Date – Enter a suffix of your choice
Style – Bold, Italic, Underline
Font Family – Theme Default, Web Safe Font, Custom Font
The names for each of the months and days may be localised.
2day also has a sister stack – LastPublished. The RapidWeaver snippet '%last_published%' used to publish a simple date, e.g. 31/12/2017, but the snippet is no longer supported. At the same time, the snippet doesn't really say a lot.
LastPublished has the same settings as 2day, but will display the publishing date instead of the current date, so that you can supply your visitors with a more descriptive date in any format that you wish.
Whilst we're on the subject of Marathia's Stacks; Jeroen also published two free page background stacks to round off 2017!
Shards generates a random, angular page background pattern with up to 3 colours, plus a fallback colour for older browsers, that resembles neon shards.
Nebula generates a random background pattern that resembles nebulas in space. Nebula supports 2 colours and a fallback colour.
At first, I wasn't too impressed by Shards, but saw potential with Nebula. With time, however, both stacks sort of grow on you…
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.
There are a number of Background Image stacks available. I use Background images regularly for semi parallax effects. Jeroen from Marathia's Stacks has just released a new BGI stack. BackgroundImageRotator.
BackgroundImageRotator is made interesting by three facts; not only can it, as the name implies, turn your site's background into a slideshow and display a selection of images, but it can also display a static text and a semi transparent overlay above the slideshow and multiple transition options are available.
BackgroundImageRotator can also display Play/Pause and Back/Forward buttons and navigational dots; both are active by default. They appear at the bottom of the page and overlay the page's content, There is, however an option in the stack settings to 'make room at the bottom' which will shift the page upwards by a definable number of pixels – the default is 80px – to make room for the navigation. This additional space can be filled with a background colour which may also be opaque. As this option will not work with all themes, however, there is a second option 'try harder'. This will help with some more stubborn themes, but may not help with all. Foundation is one of those themes that refuses to be impressed by this setting.
The colour of the navigation controls and the navigational dots can be set independently. The Back/Forward arrows can be either at the edge of the page, or directly next to the Pause/Play buttons. A breakpoint can be set for the control's visibility.
To add images to BackgroundImageRotator, drag the stack onto a Stacks page. An empty slide is already in the slide container; I didn't immediately recognise this fact – this may have been because the page I was working on had a white background. Click on the first slide and an image well will open. You can choose to drag in local images or set the path to external [warehoused] images. Click the slide container's + button to add further images your slideshow.
Once you have multiple images in the slide container, you can drag them around to alter their sequence. The slide container's control panel allows you to set the number of images displayed in one row of the container during the setup process.
The interesting thing about BackgroundImageRotator is the fact that you can choose between 19 [nineteen] different transitions ranging from Fade to Speed. The length of time that each image is displayed can be set with 'Speed'. Sadly, the length of the transition itself can not be set.
The rather abrupt effect of the image change can be minimised by adding a colour overlay and/or a tiled semi transparent image – perhaps a texture or raster overlay – to the slideshow. This will also aid the readability of your page contents.
As already mentioned, the slideshow may be overlaid with a text that appears centred, above the background image, but below the page content. If, for instance, you have a slideshow with a different brand of automobiles on each page, the vehicle's brand could be displayed; or the location if you have different locations.
The colour of the static text can be set in the slide's control panel. The text size can be set to responsive. The responsinsive size is set to either vw or % in browsers that don't support vw. The font itself may be set to the theme font, a web safe font, or a custom font. The final font settings define the left; right; centred orientation and include extra settings for margins.
I'm personally not a friend of animated backgrounds, but that is a matter of taste. There are some sites where they work well. If you need a static image for your background, deactivate the navigation controls and autoplay; add a single image to your page and a title text. Finished.
You will find a few set themes where BackgroundImageRotator will be obscured by coloured background elements by default. This where Jeroen's second new stack comes into play.
SetOpacity is a free stack that will allow you to target specific elements of your theme and alter their appearance either by targeting a specific colour or a specific #unique_id; .myClass; or section within your theme. To select CSS elements, you'll need to take a look at your code and identify, for instance, the background.
You may the go to SetOpacity's settings, enter the ID or class and then alter the colour and opacity to reveal your background image. You can add notes to the stack, so that you can remember which element was targeted. This is especially useful when you have multiple instances of SetOpacity on one page.The notes will, of course, not be published.
SetOpacity is a useful stack for altering the appearance of set themes without further knowledge of CSS.
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