RapidWeaver Stacks, PlugIns, Themes ...
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Articles for RapidWeaver

After making a brief appearance on the 1LD site before it was quite finished, Jeremy & Co have just released Article.
An 'article' may refer to a news article discussing general interest e.g. a specific topic, club newsletters, or technology news. If you need to publish articles that don't necessarily have to appear in a blog post, The new Article stack may be just what you are looking for.
In other usage, an 'article' may refer to an item, e.g. an item that is for sale. The new Article stack is also ideal for product catalogues or portfolios.

Article, when dropped into a Stacks page, displays a black rectangle with a black title, a grey icon and grey text. And whilst black may be the new white, thankfully everything about Article can be fully customised.
Article displays an image, a summary text and, if you wish, author and publishing date. When previewed, you can click an article, it opens up full page to display its contents – which may be any stack combination you please. The author and publishing date may also be replaced with any text you see fit. A feature that I really like is the Child Stack which adds new articles to form a list separated by thin dividing lines.
Once again, 1LDs settings are so extensive that I'll only be showing you a summary of the stack's settings.

Article – One Little Designer
Article in its initial state.
Article – ๅศฏTwo opened articles

Stack settings
Collapse Content in Edit Mode – Very useful
Truncate Description Text
Max Width
Mobile [Break] Point
List Padding
List Radius
An extensive list of formatting options for the Initial description
Article > Opened
An extensive list of formatting options for the article
Colour options for each of Article's elements.

Article is yet another versatile 1LD stack in contemporary design that many Weavers will find useful.


CutOut – Floating Images in RapidWeaver

Floating images. There's a stack for that – right? Right the tenth, or eleventh stack from the top of the library! Float an image to the right, or left of your text content. I never used it because I come from the world of DTP and found that floating images could look quite terrible compared to a professional layout app. However CSS is slowly catching up and Will Woodgate has released a new stack that takes advantage of the latest CSS additions: CutOut – a free stack from Stacks4Stacks.

CutOut is a stack that allows your text to gracefully flow around your image instead of the standard rectangular float that we have become used to. Check out the screenshot below:

CutOut – Stacks4Stacks
The left half of the image displays a regular floating image. The right half of the image displays a floating image when using CutOut. Notice a difference?

cutout – S4SCutOut makes use of the new 'shape-outside' CSS definition which is supported by all newer browsers (If you wish to know exactly which browsers take a look here). Shape Outside allows a text to flow around a pre-defined form. The form can be circular or polygonal. Polygonal shapes are highly experimental, but 0% 0%, 100% 0%, 50% 100% for instance, will create a triangular shape. CutOut degrades to a regular floating image on older browsers.

You can drop any Square (i.e. with equal length sides) image into CutOut and your image will automatically be displayed as a circular image which your text will flow around. If you require a more complicated shape, you'll need to search the web for shapes, or experiment.

How it works. Drag Cutout into a stacks page and you'll be presented with a dummy text. Replace the text with your text and drag your image into the image well in the stack settings panel. It's that simple. Of course, CutOut wouldn't be an S4S stack, if it didn't support warehoused images, but you'll also notice that it also has a setting for WebYep CMS images [Teaser]. WebYep2 is nearing release and CutOut already supports the new CMS system (as will a number of other S4S stacks).

Stack settings
Image Source – Drag & Drop, Warehoused, WebYep CMS
Standard Image
Retina Image
CutOut Shape – Circle (default), Elipse, Inset, Polygon
Image Float – Left, Right
Apply Border Radius – Default 50%
Spacing – Space between image and content below breakpoint
Image Width – px
Image Margin – Top, Bottom, Left, Right
Image Width – Below breakpoint
Image Link
Content Type – HTML, Markdown, Text (default), WebYep Short and Long
Content Padding – Top, Right, Bottom, Left

With some experimenting, CutOut will allow you to create some very interesting text flows around your images. Oh, and did I mention that CutOut is a free stack?


Info Dropdown for RapidWeaver

When I first read the description of the new View More stack from Weavium, I was expecting yet another extensible paragraph stack. It turns out that View More is much more than that, it's an info box that expands when clicked to divulge more information.

Packing tons of information into a webpage has always presented a problem. How do you pack reams of text and/or images into a page, yet retain an attractive design? Well, maybe Weavium can help you…
View More is a stack that presents your visitors with a compact teaser and expands when clicked. View More is as highly customisable as we have come to expect in the short time that Weavium stacks have been available and can be configured either to subtly match any other elements on your page. or to jump out at your visitor, begging to be clicked.

In its base form, View More displays a rectangular box (the colour settings are entirely up to you) which, when opened can contain the Encyclopaedia Britannica, if you so wish.

View More – Weavium

At the foot of the opened View More stack, your visitor will discover two buttons – Close and Proceed. Obviously, the button text may be reconfigured to suit your purpose but, interestingly, the Proceed button can be set to either a link, or a JavaScript.

View More – Weavium
The initial View More state is a rectangular box containing an icon, or an image, a title, a teaser text and a button to, well, View More. When the View More button is clicked, the original content shifts around to take up less space on your page and a drawer opes to display further content. The Proceed button (which may be hidden) could then open a new page or trigger a JavaScript to…
… Well, that's entirely up to you!

Stack settings
Max Width – px
[Corner] Radius – px
Breakpoints – Tablet, Mobile

Header – Extensive settings for the header formatting, including a choice of sixteen web fonts + Custom Google Font and four different icon sets – Font Awesome, Iconic, Linear Icons, Material Icons + Custom

[Header] Content
Max Width
Content Font – as above

Button Text – px
Button Padding
Button Radius
Button Spacing – Spacing between buttons
More Button Text – View More, Close
Action Button Text – Proceed

Section Colours – Extensive colour settings for every View More setting, including diagonal gradients and background images.

Action Button – Hide/Display action button
Action Type – Link, JavaScript
Displays either Link or text box for script.

View More is a nifty little stack that allows you to display reams of information within a confined space, but with the added convenience of being able to easily add a JavaScript for further functionality. View More is currently 25% off with the code view_more_initial_release.

Let's just hope that 'Linear Icons' lives longer than other icon sets have in the past, so that we don't have to reconfigure our pages next year.


1LD Mega Menu for RapidWeaver

Over the last twelve months, One Little Designer has produced a number of menu stacks for RapidWeaver. A continuation of the theme is the new Mega Menu which may be displayed inline, or fixed on your page.

Mega Menu can contain just about anything you want it to. If you choose the right stack, it will display your main page navigation or, as 1LD's demo shows, Mega Menu can even contain Google Maps.
The fact that it may either be fixed to float at the top or bottom of your page, or displayed inline makes it especially interesting.
The Mega Menu stack can display as many dropdown menus as you wish and the menus can display as many columns as you can fit onto your page – it's all a matter of your column width.

Mega Menu is, of course, fully responsive and on mobile devices it morphs into a practical dropdown that only displays the submenus when they are clicked [tapped].
As with all recent 1LD stacks, you have a wide choice of fonts and icons and, as usual, the stack is highly configurable; once again, with so many options that I shan't be listing them all individually.

Mega Menu – 1LD
Stack settings
Position – Fixed, Inline
Orientation – Top, Bottom
Z-index – Someone went wild here and entered a number that begins with nine sextillion and continues with 21 nines!
Max Width – px
Margin – Vertical, Horizontal
Breakpoint – Point at which the menu collapses as mentioned above

Main Menu – Settings for Font and Icon sizes, Spacing, Padding and Font

Mega Dropdown – Content Alignment, Min Height, Column Padding, Item Padding, Link Size, Title Size, and lots more…

Header – Logo & Title, Toggle Size

Colours – Colour Settings for every aspect of the stack

Mega Dropdown Menu (Child Stack)
Column Size – Equal, Auto
Icon – Google Material Icons, Fontawesome, Ion Icons
Icon Code

Mega Menu Column (Child Stack)
Column Max Width – px
Custom Alignment – [Content] Left Centre, Right
Custom Colours – Colour Override for – Links, Text, Titles, Border, Background

NOTE: Mega Menu uses content overflow. In case you haven't set stacks to overflow before – When you set Mega Menu to 'Inline' your content will only become visible when there is content below the menu – i.e. something for it to overflow!

You can place as many Mega Menu stacks on your page as you wish, without having to bother about stack IDs.
Oh, and the pessimistic Z-index setting of nine sextillion, nine quintillion, nine quadrillion etc. etc. is totally unnecessary and will be ignored by all browsers* – nine will suffice in 99% of the cases. If your page contains that many layers it needs to be seriously examined!

Mega Menu is a great alternative to your default menu and well worth taking a look at.

*The maximum observed Z-index setting is 2147483647 for most modern browsers, and 16777271 for Safari 3 and below. Older Firefox browsers will not display elements with a higher Z-index than the max at all !


Tabloid for RapidWeaver

Someone recently commented that Gary at Doobox is on a roll. Well, just to prove the fact, he released yet another new stack a few days ago. Tabloid – a new take on columnised content.

The idea of letting text flow into newspaper-like columns of equal height isn't a new one, I have three or four stacks in my arsenal that will do just that, some older, some newer. Define the number of columns (with more recent stacks for multiple devices), drop in your text and watch it reflow.
Tabloid is a completely new approach to the idea.
When you drag a Tabloid stack onto your page, you'll see an empty stack with a reminder that you are working with columns, simply drop your preferred text stacks, drop in any other stacks and watch everything reflow into columns of equal height and a predetermined width when you hit preview.
The predetermined width is the key to the stack's responsiveness, if you set a column width of, say 250px, an average-width website can display three columns in desktop view, but a tablet in landscape mode can not. In such a case, Tabloid expands the column width to fit the viewport and will display two columns. This relieves you of the necessity of setting the number of columns for each device.

Tabloid – Doobox
Stack settings
Column Width – px
Spacing – Gutter Width in px
Dividers – Colour

And that's all there is to the setup.
As simple as the setup is, Tabloid is a very effective stack that effortllessly reflows your content into equal width / equal height columns – any content.


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.