Clicky

RapidWeaver Stacks, PlugIns, Themes ...
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Stack Me – Content Alignment in RapidWeaver

A left-aligned text on the right-hand side of the page. That's easy enough. Drop it into the last column of a three-column stack. You can even add a background image.
But what if you want the content to be exactly 40% of the page height, with the content vertically centred and with a colour overlay over the image.
Now things begin to get complicated. It's possible by nesting the right combination of stacks, or with Stack Me, a new stack from Der Flinke Grafiker, otherwise known as DeFliGra.

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.

Stack Me – DeFliGra
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.

Stack Me – DeFliGra
Stack settings
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 fill the Stack Me container with an image
Breakpoint
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.

Comments

Psychedelic – Coloured Backgrounds in RapidWeaver

A few years ago, I was reading a long text on the web and after a couple of seconds I thought 'hello, I thought the background colour was a subtle yellow, now it's a subtle teal' so I switched my attention to the background and found that every couple of seconds, the colour would change – almost imperceptibly. 'This is cool' I thought – 'I want it!"
I looked for a stack that might be able to help, but 'all' I found was a stack that changes the colour of the text itself.

Now there is a stack that will do exactly what I was looking for. Psychedelic from Doobox. And now I'm at risk of adding Psychedelic colours to all of my sections!

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 – Doobox
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.

Stack settings
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.

Comments

Dates (and Backgrounds) in RapidWeaver

Today is December 31, 2017. Well, it was when I wrote this, but for you, it will already be 2018. So what if you need to display today's current date on your RapidWeaver page and keep it updated? 2day from Marathia's Stacks can help you do that easily.

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.

Marathia – 2day
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.

Stack settings
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

Text Styling
Font Size
Font Colour
Alignment
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.

2day and LastPublished, two useful 'pay what you want' stacks for displaying dates.

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…

Comments

Stacked Images in RapidWeaver

I'm not in my office today. In fact, I'm not even in the country. Nevertheless, I just took a quick look at Tommy Hansen's iStack (DeFliGra, for those not familiar with the name) and while my design results are not terribly inspiring, iStack is.

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.

DeFliGra iSTack

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.

Stack settings

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

DeFliGra iStack

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.

Comments

Background Image Rotator

BackgroundImageRotator from Marathia, Review By Rob Hall, CEO at rjh Web Design Rating: 4 out of 5. BackgroundImageRotator is useful new stack which adds background slideshows to RapidWeaver Stacks pages!

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.

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.