Press is an extremely versatile button stack that will allow you to create just about any button that you can imagine. Flat buttons are currently the mode (don't worry, fashions change and flat will be replaced by something else soon – and we'll find the new 'modern look' just as cool). 1LD acknowledges the current trend, so obviously, when you drag your first Press stack into a project, your new button will be flat and black.
Want flat with a very subtle gradient, or pill formed with a less subtle gradient, perhaps a patterned background? Not to forget Ghost buttons, of course – they're still semi fashionable; Press can do them all and more.
And Press doesn't stop at simple buttons, it can build button groups too. If you need to build a menu bar of your own, design the basic button that you'd like, drag a Press Group stack to the page, drag your button into it and duplicate it inside the Group as often as you need it.
If I go through all of the settings available in the two Press stacks, you'll still be reading next week.
Press has similar settings to previous 1LD stacks recently reviewed here. The settings groups are:
Button Initial State
Button Hover State
Button Active State
Advanced (Custom Classes)
Each of the above groups contains extensive settings.
Press Group contains settings for the Shared Button Styles – Group Radius, Button Margin and Button Padding.
Press group and the contained buttons are responsive, adjusting to all screen sizes. The only thing I miss is an option to display a hamburger on mobile devices.
You can read the full instructions for Press here.
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.
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