Clicky

RapidWeaver Stacks, PlugIns, Themes ...
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Melodeon for RapidWeaver

A melodeon, or 'squeezebox' as it is sometimes called (Quetschkommode if you're German), is a musical instrument. It is played by expanding and compressing a set of bellows whilst pressing a combination of buttons.
Weavium's 20th stack, Melodeon, doesn't play music, but it does expand and compress when hovered and it displays buttons when clicked.

Melodeon; a row of columns. When one of the columns is hovered, it expands whilst the adjoining columns are compressed. When clicked, the column expands to full width, the vertical title flips to horizontal and both a 'more' button and an icon are displayed. The more button opens up a content slider below the expanded column and displays further information.

Melodeon – WeaviumMelodeon – Weavium

The number of columns that Melodeon displays depends on the number of child stacks that have been added. Both the maximum width and the height can be determined so that Melodeon could also appear as a row of buttons. The columns are neatly stacked when displayed on mobile, but setting the breakpoint to a width higher the the maximum expected viewport also allows Melodeon to be stacked when viewed with a desktop browser.

Stack settings
Max Width – px
Mobile Point
Height
Widths – Min Width, Hover Width
Radius
Spacing Padding
Title Size – Initial, Expanded
BG Icon Size
Icon Offset
Expand Toggle – Button Size, Icon Size
Toggle Radius
Content Width
Padding

Items Mobile
Heights – Min Height, Hover Height
Icon Size
Icon Offset

Colours & Fonts
Title Font – 17 options plus google fonts
Content Font – As above
Colour settings for all content.

The child stack settings can override each of the section settings.

Please note that DISQUS operates the forum below.
When you sign in to comment, RWNinja will provide your email, first and last names to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accepting the DISQUS terms of service.
Comments

Panels for RapidWeaver

Panels is Weavium's latest contribution to the Stacks scene. Full page animated panels that expand, when clicked, to display whatever you care to drop inside.

When first inserted into a Stacks page, Panels displays a single panel 1000px wide. The panel contains an icon, a title and a stack container into which you can insert the expanded content. The panel may be configured to have a flat colour, gradient (via the Panels item settings) or an image. The Icon – from a choice of four icon fonts – may be replaced with an image.

By adding item child stacks, the panel is divided into two, three, four etc. panels which either have the max width you've set, or fill the container that they are in. When one of the Panels is hovered it expands, the icon gently bounces and a text e.g. 'Read More' slides up into the panel. When clicked, the panel expands to fill the full width of its container and displays the container stacks.Panels – WeaviumPanels – WeaviumStack settings
General
Max Width – px
Max Height – Vertical Mode, Horizontal Mode
Radius
Mobile Point – Breakpoint px

Section Panels
Icon BG Size – Initial, Active
Icon Size – Initial, Active
Icon Radius – Initial, Active
Title Size – Initial, Active
Title Spacing – Initial, Active
Title Weight
Content Width
Content Padding
Help Text
Help Text Size
Hover Stretch – Desktop, Mobile

Colours & Fonts
Title Font – 18 options plus Custom
Content Font – as above
Icon Colour – Icon, BG
Title [colour]
Help Text
Content – Header, Text, Links
Overlays

The item stack settings allow you to set the individual Icon or image plus a background image and allows the override of all colour settings.

Weavium's expanding stacks are amongst the best available. Panels is no exception and is a highly flexible way to display additional information within a confined space.

NOTE: Ion Icons have just been upgraded to version 4 with which Panels is not yet compatible. If you wish to use Ion Icons, I recommend you download the cheatsheet for version 2 which is 100% compatible.

Please note that DISQUS operates the forum below.
When you sign in to comment, RWNinja will provide your email, first and last names to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accepting the DISQUS terms of service.
Comments

Simple Tabs in RapidWeaver

Off the top of my head and without taxing my Stacks library, I can think of half a dozen tabbed stacks for RapidWeaver. Some morph into accordions on mobile, some don't. Did we need another tabbed Stack? Of course we did! If only for the sake of diversity. Simple Tabs from One Little Designer.

Simple Tabs – 1LDSimple Tabs, as the name implies, is a stack that will simply add tabbed (the tabs may also be buttons) content to your page. The tabs change to buttons on mobile, but can be neatly arranged into columns.
The setup is – simple – and the results are attractive.

When you drag Simple Tabs onto a Stacks page, you get a container with two child stacks into which you can drop your content. Each of the child stacks has a tab at its upper edge that contains an Ion Icon and a text area for your title.
All you need to do, is add some content, change the icons and decide on a colour scheme. As usual with 1LD, you get a wide choice of both icons and of fonts. The tab sizes can be easily adjusted to suit and there are a couple of neat features that I don't recall seeing elsewhere – the already mentioned 'stacked' buttons, for instance…

All in all, I find Simple Tabs to be quite impressive and I'm sure that it will find a home I'm many Weavers' libraries.

Simple Tabs – 1LD
Stack settings
Floating Pill – A setting that allows the active button to slide across the tabbed panel when the next tab is clicked
Connect Tabs – When active, the tabs are connected to the content window. Otherwise the tabs appear as buttons
Max Width – The max width of the tabbed and the content area
Active Tab – The tab that is automatically displayed when the page is loaded
Font Family – The standard 1LD choice of 13 web fonts, plus Custom

Tabs
Vertical Position – Top/Bottom. When 'Bottom' is set, the tabs appear as buttons
Alignment – Left, Centre, Right
Text Size
Icon Size
Spacing – Vertical, Horizontal
Padding – Vertical, Horizontal
Radius – The bottom radius is deactivated when 'Connect Tabs' is active
Text Colour
Background – Off, Colour, Gradient, Image
Border – The tab/button border
Active Text Colour
Active Background – as above
Border – as above

Tabs > Responsive
Breakpoints – Tablet, Mobile
Columns – Tablet, Mobile
Hide Text
Hide Icons

Content
Padding – Vertical, Horizontal
Radius
Text Colour
Background – As above
Border

Experimental – Match content bg to tab colour

Simple Tabs Tab Child
Icon Font – Standard 1LD choice of 3 – Oops! – 4 Icon Sets – FontAwesome5 is included!
Custom Colours

The next time that I need tabbed content, I shall seriously consider using Simple Tabs. I especially like the fact that the tab borders allow you add a neat contrasting border at the top (or bottom) of the button; I also like the slide effect when a new tab is clicked.
Check out the 1LD product page to find out more.

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.