RapidWeaver Stacks, PlugIns, Themes ...
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Quick 'n' Dirty Sections in RapidWeaver

I have a softspot for stacks that save me time and save me from having to think. I'm a graphic Designer (at least, that's what my diploma says) but sometimes it's nice to be able to just drag a stack onto a page, drop in an image and some text and then move on to the next section. Quick 'n' Dirty! And that's exactly what the new Section stack from Weavium allows me to do…

Section is a free stack that allows me to switch off for a while. Full width sections with header and caption text and a bare minimum of design possibilities. All I need to do is decide on a colour for the background and contrasting colours for the Header and caption. Once I've done so, I can drop in my content and move on to the next section.

Section Weavium

I recently built a site that contained just such sections containing price information for various services. Had I had Weavium's Section, I'd have had the page finished in half the time (and could still have charged the same price!).

Stack settings

Padding T,B,L,R. Default 100,100, 20, 20px

Background [colour] None, Solid, Gradient, Image.

Section Title
Size – Desk, Mobile, Tablet
Space Below – Desk, Mobile, Tablet
Max Width
Font – 15 popular web fonts plus custom
Font Weight – Bold (default), Normal

Section Description
Same options as above.

Section is a soft release, so you can expect a few changes to appear in the very near future e.g. customisation of the color and sizing of header tags, text, and links within the content.
This is a neat little stack, made all the more interesting by the fact that is's free.


Designing Every Element in RapidWeaver

Marten Claridge is a gifted designer and if you watched his contribution to this year's Weavers' Space Conference 'Design Every Element', or if you've downloaded any of his creative stacks, you'll know exactly what I'm taliking about.

During the WSC, Marten built a very attractive page using only Big White Duck stacks. There were comments during the conference that Marten's feature was slow, but hey! Designing Every Element is a slow process.
At the end of the presentation, however, a chorus of voices shouted "I want to be able to do the same."

Well, if you digested what Marten explained, you can.
If you found it too complicated, Marten promised at the end of his talk to deliver the project module he created online.
He's kept his promise, but instead of delivering a single module, he's submitted 154 (one hundred and fifty-four) of them!
Sadly, this means that you'll never again have to design a page section on your own — ever!

Maximal Design Style Modules. Subtitled Duck Soup – using Marten's own words "the design modules solve a common problem for Weavers struggling to stay relevant in a highly competitive market: how to quickly and easily add real professional style to a project to make it stand out from the crowd."

Duck Soup is a bundle containing five packs for Foundation users: Chico, Harpo, Groucho, Gummo and Zeppo. Each pack is duplicated based on the universal Blank Theme (included with the project) for those that don't use Foundation.
Each pack is a project file containing five stacks pages of uniquely designed modules. Each project page contains Multiple modules. And each of the modules contains perfectly paired combinations of Google Fonts for the headers and content.

Maximal Design Modules – Duck Soup

To use one of the modules in your project, simply copy it from the Duck Soup project, paste it into your own page and replace the text and images with your individual content.
Quick, simple, awe-inspiring results are guaranteed!

Of course, the modules don't necessarily need to be utilised 'as is', but can be used as a schematic to jumpstart your new project. Adjust a few settings here and there and with just a few minutes work, you have your very own module.

The 'Universal' modules should work with virtually any theme, but given the large number of old and new themes out there, this obviously can't be guaranteed. Depending on the responsive theme of your choice, the settings may require a little refinement.

Marten has obviously spent many hours studying his collection of BWD stacks and he puts them to use expertly. Some of the effects he achieves are quite amazing and a lot of thought has gone into designg each and every element.

Stacks used

Big White Duck Stacks:
Sections Pro
Sections Box
Paragraph Pro
Header Pro
Button Plus 2

It goes without saying that you will also need RW 6+ and Stacks 3+

Each of the five project packs is available as a separate purchase, or you can buy the complete bundle collection with a 25% reduction – that's less than 50¢ per module.

Trivia: How did the modules get their names? Duck Soup was a film made in 1933. Chico, Harpo, Groucho, and Zeppo – The Marx Brothers – were the stars of this film while Milton 'Gummo' Marx was the four brothers' manager. What better name then, for a series of projects featuring BWD stacks exclusively, than Duck Soup?


Hijacking the Scroll Pane In RapidWeaver

This one nearly got by unnoticed: If you purchased ScrollPane from Tsooj Media, you'll be pleased to hear that an updated version is now available on the Stacks4Stacks page.

After chatting with Will Woodgate, I know that he was reluctant to update ScrollPane, and for a week, or two, ScrollPane was even repurposed. However, Will has taken the existing customer base into consideration and – rather than hanging existing users out to dry – has decided to release an update after all.

For those of you that don't know ScrollPane, here's a rundown:

ScrollPane is a stack that allows you to alter the appearance of stacks that have content overflow and customise the scrollbar.
Now I personally hate it when my mouse cursor, or the page scrollbar are hi-jacked and suddenly appear in customised form on a website. And generally speaking, a customised scrollbar is frowned upon. However, there's a difference between hi-jacking the webpage scrollbar and the scrollbars of stacks that have overflow. I'm not against the latter and actually approve of ScrollPane.

ScrollPane allows you to customise overflowing containers to match the general appearance of your page, i.e. use the site's colour scheme and flat appearance, and/or match the scroll arrows to the [Mac] OS.

S4S ScrollPane
ScrollPane has been updated to take advantage of the Stacks 3 options and the settings panel has been tidied up. It's now a much neater stack than before.

Stack settings

General Settings
Gutter Margin – Amount of space (px) between the content and the scrollbar
Scroll Speed – Distance the pane travels (px) when arrow keys, or scroll wheel are used
Click Speed – Distance the pane travels (px) when the scroll arrows, or scroll pane is clicked
Pane Height – Total height of the ScrollPanel
Transparent Pane – active by default. When deactivated the ScrollPanel Background Colour can be set

Arrow Settings
Show Arrows – Default
Normal Arrow – Arrow Opacity between 1 and 61
Hover Arrow – Arrow Opacity between 1 and 61
Scroll On Arrow Hover
OS Style Arrow Position – both arrows below the scroll panel
Automatically Reinitialise – Reinitialise the stack every n milliseconds to compensate for mobile screen rotation, or false image size definition

Track & Drag Settings
Hide Track
Track Colour
Automatic Drag Height
[Manual] Drag Height – px
Drag [Colour] Normal
Drag [Colour] Hovered
Radius – px

Advanced Settings
Fade In ScrollPane
Fade In Delay – ms

With so many options for its configuration, ScrollPane can be matched to any webpage and makes truncated text attractive.


BFS3 – TaskList For RapidWeaver

A stack that adds a ToDo list to your page and can cross off the elements that you've already eliminated. Can RapidWeaver do this? Well yes, of course it can. It can now, at least. RWExtras just released TaskList and if you hurry, you can grab it as a Black Friday promotion.

Let's say you have recipes online and you'd like your visitors to be able to cross off the ingredients that they already have and have the browser remember them. Or on your very private homepage, you'd like a list of 'Things To Do' before you publish an RW project. TaskList is an ingenious little stack even supports subheadings so that you can divide your recipe into Meat Dish, Sauce and Trimmings.
The possibilities are almost endless…

TaskList – RWExtras

TaskList has extensive Style settings for the list itself and even includes options for the Checked Items such as Bold, Italic, Strikethrough, Opacity, Background Colour and Text Colour.

A ToDo List sounds so simple, yet it can be so configurable. Grab TaskList as part of RWExtra's Black Friday Promotion now!


Responsive Timelines in RapidWeaver

Traditionally a timeline is displayed vertically. But if you were to place a timeline of all assassinations that took place in Italy into a vertical timeline, your webpage would be endless (Being Emperor, King, or Pope in Italy was always accompanied by occupational hazards and political visitors didn't always survive their trip to the Apennine Peninsula). Enter Responsive Timeline from One Little Designer…

Responsive Timeline isn't the first timeline stack for RapidWeaver, I've reviewed two in the past, but it is the first timeline stack that will allow you to scroll your timeline horizontally. The result: Your Italian assassinations still take up a heck of a lot of space, but there is still room on your page for a lot more content!

Responsive Timeline – 1LD
And the timeline can be made to look very attractive – there's an example on 1LD's homepage that displays a full screen image with the first date visible. Then, when you scroll vertically, further dates fade in. This is the default appearance for Responsive Timeline – the first date appears on the left of the screen, accompanied by a button at the top of the screen, inviting you to scroll right. When you do so, the next dates are revealed with a fade-up animation. With the timeline set to horizontal, Responsive Timeline automatically reverts to vertical below a defined breakpoint.
… if you have Responsive Timeline set to vertical as you scroll down the page, a single date will appear, then the next and the next, as you scroll further

So about that button. It says Scroll and has an arrow pointing to the right. As horizontal scrolling is not yet the expected behaviour on a website, I clicked the button and nothing happened. Currently nothing will happen and that is the only complaint that I have with Responsive Timeline – it has a scroll button that doesn't.

Stack settings
Use Animations – When deactivated the timeline is static
Orientation – Horizontal (default), Vertical
Item Max Width
Mobile [break]Point
Line Thickness – Joining line in px
Line Colour

Content Blocks
Text [colour]
Headers [colour]
Links [colour]
Content BG [colour]
Content Font – 14 font options
Triangle size – connector in px
Triangle Radius
Shadow – deactivated by default

Icon Colour
Background Colour
Icon Size – Desktop, Mobile
Icon Text Size – Desktop, Mobile
Icon Margin – Desktop, Mobile
Icon Radius
Border Weight
Border Colour
Shadow – deactivated by default

Text Colour
Text Size – Desktop, Mobile

The Responsive Timeline Item Child has options to set the Date, the Icon Font and the Icon, plus an option to add an icon image just in case you can't find the weapon of choice for your assassinations…

If you need a timeline on your website, you now have a choice of three. Two of them are the more traditional, vertical timeline and 1LD's interesting space saver – Responsive Timeline – I know which one I would choose for longer publications.


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.


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.


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.