Side Menu is very closely related to Overlay Menu, it is equally highly configurable, but instead of overlaying the whole page, it slides out from the left, or from the right and is exactly as wide as you want it to be. Just like Overlay Menu, Side Menu can reflect the RapidWeaver site menu, or it can contain a custom list of links. For this reason, multiple instances of Side Menu can be placed on a stacks page.
The menu initially shows up as a black sidebar on the left of the page, with a black menu button in the top righthand corner. This is a configuration that is often seen on current websites but, not being a mortician, I'm not especially fond of this appearance. So let's take a look at the settings panel to see if we can change it.
The first setting is Unique Menu ID. Necessary because, as already stated, you can have multiple instances of Side Menu on each page. If you only intend to have one instance, you can leave the default ID unaltered.
Use Custom List is the next checkbox you'll encounter. Check it if you want a custom links list. Leave it unchecked if you need a site menu.
Now the party can begin: The Menu Configuration sets out with position – Left, or right – and continues with Font Family. Once again, you'll find a choice of twelve Google Fonts and once again, I ask myself – if Google Fonts are implemented, why can't I just enter the name of the font I want to use? Whatever – I'm sure you'll find a suitable font for your site amongst the twelve.
The Text Alignment may be set to Left, Right, or Centre and the Menu Fill Mode can be set to Pixels or Percent. The default setting is px.
Next follow individual settings for the menu width when displayed on Mobile, Tablet and Desktop. The menu Padding is set in px.
Next up is the Background opacity, followed by Background [content], which may be set to Off, Colour, Gradient, or Image. Images are centred and set to fill the menu height.
Image Cover will set a colour overlay for the background image – a nice effect.
As demonstrated in the screenshot, the Menu can contain a Header and/or a Footer. You may drop any stacks you please in the child stacks, but don't forget that the longer your link list, the less room you will have available. As also demonstrated in the screenshot, when the menu is opened, the site's scroll bar is hidden.
Next up: Dropdown Icons. The Icon Size for the icon that appears next to your link list to indicate sub-pages is set to a default of 24px. The Open Icon Font may be chosen from Google Material Icons, Font Awesome, or ION. Open Icon awaits the code of your choice. The same applies to the Close Icon.
Rotate Icon When Opened has its own settings for Degrees.
Top Level Menu Items has options for Font Size, Subtitle Size (for custom link lists), Padding and Vertical Spacing. Radius refers to the button radius. Then we have Text Colour and Subtitle Colour. While the Text Colour is a solid colour, the Subtitle Colour may be translucent.
The Button Background can be set to Off, Colour, or Gradient. The Gradient settings thankfully only have two colours and produce a very smooth gradient. The Direction can be Top to Bottom, Left to Right, Right to Left, or Diagonal.
Hover Text Colour and Hover Subtitle Colour are set individually, as is the Hover Background.
Sub Level Menu Items automatically inherit the Top Level Font, but the Font Size may be set individually. The Indent may be set either with a default Margin, or a default Padding. Margin and Padding can not be altered in this case.
The Sub Level Menu Items are also set to inherit the Top Level colours, but there is a checkbox to override the settings.
Menu Toggle. Show Toggle Text and Show Toggle Icon are the first two checkboxes. The Toggle Text Font may be set individually from the Item Font, as can the Toggle Font Size. The Toggle Text is set to 'Menu' by default. The same Icon options are available once more and the Font Size for the Icon is set individually from the text.
The Toggle Fill Mode is interesting. By default, it is set to Auto, but the options are Fill (full width), Pixel Width, or Percentage Width. The Menu Toggle is at the top right by default, but the Vertical and the Horizontal alignment may be altered, as may the Margin, Padding and Radius.
Once more we have multiple options for the Background and Hover settings, Plus Border and Shadow options.
I was irritated that the Overlay Menu Close Button couldn't be configured [at initial release]. This is not the case with Side Menu. The close button is as equally highly configurable as everything else. Hats off! ILD always listens to constructive criticism.
Advanced Settings. Here you'll find Show External Data Link Info and Make Parent Links Clickable.
Experimental. As with Overlay Menu, there is an options to Replace Theme Menu. This will not automatically work with all themes, but as mentioned last time, there are other stacks, that offer assistance here.
I liked Overlay Menu very much – it is highly configurable and is different.
I like Side Menu even more. It is more traditional so it will find wider acceptance and, if anything, it is more highly configurable than its sister stack.
Paypal Stack is not your typical Paypal Button stack. In fact it does not add a Paypal button to your page at all, instead it adds either a hidden download link or a failure message.
PayPal Stack requires that you set up your Paypal Merchant Page with a few options that you probably haven't activated yet. First, you will need to activate Payment Data Transfer (PDT), after which you need to copy the ID Token into Paypal Stack. On the PayPal setup page, you will also need to activate Automatic Return and add the URL of your success/failure page. Detailed instructions are supplied on Bryn's page.
Once you've set up your purchase page, you can add the button code supplied by PayPal to an HTML stack.
Now add the new success/failure page that includes the PayPal Stack.
First add your Item ID to the Paypal Stack settings panel under Match Item ID. You can add up to four items.
There is an option to Check Name/Email/Payment to prevent falsified payments.
The next option is PayPal Hostname. This may be altered for test purposes, but should be set to Paypal.com before publishing your page.
Finally there is an option to add Debug Information to the transaction details that PayPal returns after a purchase.
The Paypal Stack itself has two containers. The upper container is labeled If Purchase Valid and you may drop your Payment Confirmed message (required by PayPal) and your download link or your download stacks (E.G FileSafe, or TrueDownload) here. The stacks contained here will only be displayed once a payment is confirmed and your buyer is returned to your page via PayPal.
The lower container is labeled Else and the stacks contained here will only be displayed if your customer cancels his payment on the Paypal page, or someone arrives on your page by accident. Something like a text stack with "Oops! You changed your mind, or an error occurred.", for instance.
Paypal Stack automatically changes your page extension to .php, so if you already had the download page online, you'll need to delete the .html file. A small price to pay for
not having a page that will allow your visitors to see a download link when they find the page by accident. I'd have purchased this stack years ago – had it been available.
There are already a couple of solutions available for creating single page websites. Not all of them will easily adapt to the RW theme that you want to use. Rails changes that. And Rails is dead simple to use.
Drop Rails onto a Stacks page and you will find that you have a content box with three sections. And the new stack has automatically added navigation buttons for the sections. All you now have to do is add your content and name the sections. A Single Page website, built within minutes and without any complicated configuration!
The Rails main settings panel controls the menu configuration and allows you to match the Rails-Section Menu to your theme. The first settings allow you to define the width of the Menu Items, The Item Text Size and the button Radius.
Next, you can add an Items V.Line – a vertical dividing line between the buttons and the main content with Items. Item H. Line adds a horizontal dividing line between the buttons. Extra Bottom (default 100px) adds a space below the Rails Sections to allow easier scrolling. If you add a footer to your page this may be set to 0px.
The Navigation Items will slide down the page as you scroll. The Transition Time may be set between 0 and 2000 ms and you'll find a choice of seven different Easing Types – the slide transition.
Items Alignment may be set to the Left, or Right hand side of your page and Hide Items@ defines the breakpoint at which they will be hidden. The default is set to a viewport of 700px.
Top Offsets has settings for Items and Sections. Each is set to 80px by default. This means that when an Item is clicked, both the Section and the Items jump to a position 80px below the top of the browser window. I find that 80px is fine for the navigation, but set Sections to 0px so that the new section arrives seamlessly at the top of the window. I couldn't take the time to animate the screenshot above, so I added a second instance of the navigation Items – you get the idea.
The Rails Sections padding default to Bottom 5%, Left 10%. In the screenshot above, I removed both and padded the columns stack instead to allow the sections to adjoin seamless and the images to expand to full width.
Item List gives you four Colour settings for the navigation buttons – Static, Hover Lines and Current [Active]. The same settings are also available for Item Text and Item Icons.
Once you've worked your way through all the above settings, your navigation should blend seamlessly with your theme. All that remains is to add the navigation text and, if required, an Icon to each button.
To do so, simply click on the button and a new settings panel will be displayed. Add your Item Name, click Font Awesome Icon (if required), add a Top Separator (or not), and, if you choose to do so, add a link to an external page.
Yes, by clicking the + button in the Rails Item stack, you can add further buttons and link them to external pages!
The final Rail Item settings allow you to format the dividing line and the Font Awesome icons, if you've added them.
When you've added content to your Rails Section, you can format each section individually by clicking it and then returning to the settings panel. The panel contains Section Colours for the Background, Text, Links and [link] Hover. The Background may be set to Transparent and there is a checkbox to let the RW theme override the Section colours.
To add further sections, click the Rails stack + button to add a new child stack. You will also need to add a new child stack to the items stack – the new button is automatically linked to the new Section.
Single Page websites aren't going to go out of fashion any time soon and Rails is currently the simplest method of building them with any RapidWeaver theme you care to choose — and it even looks great.
Foundation, Foundry and Bootleg users already have a wide choice of menus for their pages, while users of other themes are left out in the cold. With the exception of MyMenu and a few button stacks, there are not a lot of choices available. Overlay Menu to the rescue.
I'll freely admit that when I dragged 1LD's Overlay Menu onto my page and took a look at the settings panel, I was a little overwhelmed. Let's take a look and see why:
The General settings panel begins by requesting a unique id. Well o.k. that suggests that I can place more than one instance of Overlay Menu on my page, but why would I want two menus? That's instantly explained but the next option Use Custom List. If this option is left unchecked, OM defaults to the standard RapidWeaver Menu. When checked, the stack instantly changes to display a list of links. The link list is formatted with Markdown by default and contains both Top Level and Sub Level entries. If you prefer HTML formatting, you just need to set it in the next dropdown menu.
Cool, so OM is multifunctional and I can open any link with it – on my page, or elsewhere.
The Menu panel continues with a choice of twelve options for the Font Family. The fonts are all Google fonts, so I'm wondering why there isn't an option to set my own font. However, the fonts are all some of the most popular of the Google fonts, so chances are that your font is amongst them.
The Menu Fill width determines the maximum width for the link list. By default it is set to 960px so, theoretically its max width will be the same width your site. You may also set a max width in %, or to Fill. The max width is always centred on the page, with the link list aligned left.
Next we have the Overlay Opacity with settings between 0 and 1. The default is 0.8.
Now I just wrote that Overlay Menu is a full page overlay. That's not strictly 100% true. The Background may be set to None, Colour, Gradient or Image, so deactivating the background leaves you with just the link list when the menu button is activated. However, you can't click through the transparent overlay, so make sure that your Close button is prominent. This will take some serious planning, as the Close toggle is always the same colour as the link text.
The next settings are for the Dropdown Icons – the icons that appear next to the submenus. You may choose from Google Material Icons, Fontawesome icons, or Ion icons and you'll find options for both the open and the close icon. There is also an option to Rotate Icon when opened.
Top Level Menu Items provides the settings to format your Overlay Menu top level links. These include Font Size, Padding (Horizontal and Vertical), Vertical Spacing, Radius, Text Colour and Background Colour. The Background Colour may be set to None, Colour, or Gradient. With the exception of the Radius, the same settings apply to the Sub Level Menu Items. However, Use Top Level Colour Styles is checked by default.
The Toggle Menu settings are the next to scroll into view. By unchecking Show Toggle Text, the toggle menu will appear as a simple icon bar. By unchecking Show Toggle Icon, the bar will contain just the text. It probably doesn't make any sense to uncheck both?
The Toggle Text Font contains the same options as the Menu panel as does the Toggle Icon Font menu. The Font Size is set to 24pt by default; the Icon Size to 30pt.
The bar's Fill mode is set to Auto by default, but may be set to Fill, Pixel Width, or Percentage Width. This gives you the option of having a simple icon button, or a full width menu bar, depending on your preference.
The Position is set to Fixed by default, so that the page content scrolls underneath the static bar. There is an option for Inline positioning, for when you have a link list embedded in a column. The vertical alignment can be set to Top, or Bottom, making it possible to have a menu bar at the bottom of the page. The Horizontal Alignment can be set to Left, Right, or Center.
Both the Margins and the Padding are set to 10px by default. By removing the Margins, the menu bar will align flush with the edge of the page. The button Radius is set to 4px by default, but can be set as high as 100 to allow for pill buttons or round icons buttons.
The toggle bar Text Colour is the next choice you have to make. Then the Background. The Background may be set to None, Colour, Gradient. or image. Images are scaled to fit the button width.
The same settings are available for the Hovered button, allowing you to have two different pattern states on hover, if so desired.
The next two settings are for Borders and Shadows. Both are off by default. When activated, the settings panel expands to display the styling settings.
Overlay Menu includes a separate Overlay Menu Extra Toggle stack which may be positioned anywhere on the page. The stack settings are identical to those found in the main stack. The extra stack has one advantage — you can drop it into a BWD SlideUp stack, to have it disappear when the page is scrolled.
Overlay Menu can also be set to open via any external button, clicking the next option Show External Data Link Info, will display the menu's data link id in edit mode.
The final option is labeled Experimental. It's an option to Replace Theme Menu. This may not work with all themes. But there are other stacks available that can help hide your theme's menu.
If you're tired of your standard theme menu bars, Overlay Menu is a great alternative.
Jeremy and his crew are always open to suggestions and I've been informed that an update to the stack is already in the works to include new options. I'm sure Jeremy won't mind me letting the cat out of the bag: The update will include List icons, Subtitles, the ability to hide OM at different screen sizes, Clickable Dropdown Items, a new interface for creating menus and perhaps a few other options.
ButtonPlus is titled 'The Ultimate Foundation Button'. I don't know of an escalation of 'Ultimate', if there is one, it should be added as the superlative for ButtonPlus2, which is without a doubt the most flexible button stack ever to hit the RW scene. The ButtonPlus2 stack will soon be accompanied by a Button Bar and a Button Group stack, but this post will focus on the ButtonPlus stack itself. Why? Because you could write a book about everything that is possible with the new stacks! Once again, it's like buying a new car. It's no problem to get in and drive off, but it takes some exploration to discover what every dashboard feature is. Prepare yourself for a long expedition.
When you first drag a ButtonPlus stack into your project, it looks very much like the first version; after a fleeting glance at the setup panel you'd be excused for thinking that it's the same stack, but look closer and you'll find that a number of settings have been added. First there are settings for the button padding both for the mobile view and the desktop view. Then there are those buttons that we have become accustomed to in all BWD stacks Hide/Show Child Stacks.
Next, you'll find that a setting has been added with the options Full Width: Never (default), Mobile Only, Desktop Only and Always. You'll find the Button Styles interesting too. They include settings for the ProStyles Master stack. If you haven't already, take a look at the Pro Styles stack. Pro Styles allows you to define up to eight different button styles which will then allow you to configure your ButtonPlus buttons with a single mouse click, ensuring that each and every button on your page – or site wide – is identical.
The Button Size has been extended by Fixed Height and Custom Padding.
The Fixed Height is of special interest, because when you choose the setting, you now have the capability to set the exact height and responsive width of your button – again, with settings for both Mobile and Desktop. The Shape Menu has also received additions. It now includes Custom Rounding and Square (Override ProStyle).
The option to add an Icon to your ButtonPlus button has been completely rewritten. The Icon may be combined with the button you just set up above, or it can be set to a round button with only the icon. The standard icon set is Fontawesome, but you may also define your own icon set.
Of course the icon colour for Static and Hovered states may be set, but not only that – the icon size can also be set independently from the font size and the Icon Padding – the distance between the button text and the icon – can also be defined.
But that's not all. If you set Split Button, you get a split button – not just optically. The colour of the main button and the split icon button may be set independently. And by setting Launch External Pop Drop, the split button will be assigned two separate functions – the icon will open a Pop Drop* window, while the main button will open the link that you set.
* BWD's Pop Drop stack must be installed
The Button Font now includes an option for Google Fonts and, because ButtonPlus is now fully responsive, you get to set the Breakpoint for the responsive features.
ButtonPlus will, as already mentioned, soon be partnered by two further stacks – Button Bar and Button group – and the settings that follow, a whole bucket full of them, all apply to buttons within theses two stacks too.
A ButtonPlus Bar with Zone Logo and Pop Drop
As mentioned above, you can hide the ButtonPlus Child Stacks in the stack settings. Version one didn't have Child Stacks, but with version two, you can add Hover Effects and Visibility settings. The most interesting features, however, are probably the option to add Dropdown Content and Pop Drop content.
The Dropdown Content has two further options. You may add both Dropdown Links and Dropdown Columns.
The Dropdown Links allow you to add a list of links to your Button Plus Stack, but even the links are more versatile than you'd imagine! They may be set as Headers for group links, or they may 'simply' be linked with a URL or a script. I say 'simply', because even the links have a full set of settings available which will allow you to format everything from size and spacing to a leading badge with ALT text!
Tip — Need a line of links somewhere on your page, rather than a column of links? Drag a Link child stack anywhere on your page and duplicate it as often as you require. Your links will render on a single line!
The Dropdown Columns are perhaps even more exciting! When clicked, a Columns Child Stack contains two columns to which you can add further stacks. You can, however, add additional Child Column stacks which can then be confined to the button width, or can stretch to fill the column container – so-called Mega Menus.
Once more the settings panel allows you to format the Dropdown Columns to your heart's content.
If you have Pop Drop installed, you'll find that a Pop Drop child stack is built directly into the ButtonPlus stack and will accept just about any stack you can throw at it! Pop Drop content can be configured as a Dropdown/Popover or as a separate Modal Window. It has the same setup options as the standard Pop Drop stack, including Header Bar and Close Icon – the simplest way I've found to set up Pop Drops – I was positively astounded by this
Andrew is allowing you some time to spend playing around with the ButtonPlus stacks settings before he releases Button Bars and Button Groups.
So what are these additional stacks about?
Teaser — Button Bars will add a group of buttons to your RW page. You can add Zones to the bar – stack containers that appear within the group – and you can add as many ButtonPlus buttons to the bar as you require. The button shape is configured centrally, via the Group setup panel, but the other button settings may be set up individually – as above. Button Bars are ideal for additional navigation menus.
Button Bar Child stacks include Hover Effects, Background, Toggle Menu and Visibility. You'll have fun exploring the settings panel further – I guarantee.
A ButtonPlus Bar with Dropdown Menu
Button Groups come preconfigured with three buttons. They are very similar to Button Bars, but don't have Zones and can not be styled via Pro Styles, instead they have their own custom settings. Once you got your head around the ButtonPlus settings, you'll need to play around with both Bars and Groups to see which is most suited to your purpose. If you'd like an in depth explanation of ButtonsPlus 2, take a look at Andrews instruction videos.
I promise you'll be pleasantly surprised at the possibilities that the ButtonsPlus stacks brings you. Don't forget to make a donation!
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
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?
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.
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—16