My Image

All the latest RapidWeaver Stacks reviewed,
plus the most important community news …

Stay up to date with current RapidWeaver developments

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 scroll to the Stack Me container
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.

blog comments powered by Disqus

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

Hi, I’m the Ninja Bot. What’s your name?
image/svg+xml
Nice to meet you, [1-1]. Could you tell me your mail address?
image/svg+xml
[1-1], would you like to subscribe to the monthly Ninja Newsletter?

Yes, I would like to receive your monthly newsletter.

No thanks, I’m good for now. I have a different issue.

image/svg+xml
Thanks for your support, [1-1]. Is there anything else I can do for you?
image/svg+xml

[1-1], thanks for subscribing.
By clicking 'Submit', you are giving your consent to having rjh-webdesign collect your name and email.
These details are used exclusively for the newsletter and will not be passed on to third parties!

As soon as I've added you to the mailing list, you'll receive a mail asking you to confirm your subscription.

If you made a further request, I’ll get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I would like to subscribe to the Ninja Newsletter

Message

[4]
I’m sorry to hear that, [1-1]. How may I help you then today?
image/svg+xml

[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I don’t want to subscribe to the Ninja Newsletter right now.

Message

[6]

Thanks again for contacting us. Your request was successfully submitted.

  • Stacks Image 158
  • Stacks Image 161
  • Stacks Image 164
  • Stacks Image 167
  • Stacks Image 170
  • Stacks Image 173

Looking for Inspiration?

Looking for Inspiration for a new site, or need a CTA
really quickly?

The Latest & Greatest

Kalendar for RapidWeaver
Websites that display calendars have two core functions: They show upcoming events and they ...
Filter Grid for RapidWeaver
There are a couple of stacks available that will filter RapidWeaver content; some more, some less ...
Intrinsic: CSS Grids for RapidWeaver
The 'experts' currently agree unanimously that CSS Grids are the future of web design. In a couple ...
  • 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?

Contact Information

rjh logo

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—17

Powered by rjh-design

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

Subscribe to the Ninja Newsletter

You've reached the bottom of the page, thanks for reading.

If you enjoyed what you read, you can subscribe to the Ninja Newsletter and receive a review summary once a month.

Thanks for your subscription

We shall send you a summary of the Ninja News reviews once a month.
We do not send out any other mails and we shall not, under any circumstances, share your email address with third parties.