web counter
Stack Me – Content Alignment in RapidWeaver
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. 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 tohear 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 76789
  • Stacks Image 76774
  • Stacks Image 76776
  • Stacks Image 76783
  • Stacks Image 76791
  • Stacks Image 76787

Looking for Inspiration?

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

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.

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.

View previous campaigns.

Subscribe to the Ninja Newsletter

* indicates required