RapidWeaver Stacks, PlugIns, Themes ...
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Online Calculations For RapidWeaver

If you sell a product or a service online, it's useful if your visitor can work out what he or she will need to pay before submitting an order. 1LD's new Formula stack can help your client with their calculations and simplify your order process.

Do you need to know how many tiles will be needed for that new bathroom wall? Or perhaps you want to spend the weekend at your favourite hotel in the Lake District and want to know what it will cost. With Formula you just need to add the wall's dimensions or the dates of your intended stay and the stack will do the heavy lifting for you by calculating the price and even packing the results into a contact form, ready for you to click 'Send'.

You will need to read the instruction manual before you can create your new web page. This is not criticism – once you've used it a couple of times, Formula is quite straightforward and intuitive – Formula will calculate almost anything, but you'll need to know how to proceed first!

When you drop Formula onto your new Stacks page, you will see a form with Input Field with an Import Value stack, Output and Formula. Plus a + button for child stacks. Click on the Import Value stack and check the settings panel. The Import Type can be set to Number Input (default), Checkbox, Select, Slider, or Date/Time Range. The Value is followed by an Import ID. So let's take a simple example and say you sell Coffee. And the smallest amount of coffee you can order is one pack. Set 'Amount' as the ID and the Min Value to 1. The Max Value can be set up to an indefinite amount, but let's restrict our customer to ordering 10 packs of coffee and set the Default order number to 1.
Leave the Styles at their default value for now – Single Column and Select Width 280px.

Now you can click the + button and add a new Import Value stack. Set the Type to Select, change the ID to Coffee and add Formula Selection options by clicking the child stack's + button. Arabica, Robusta, etc. Now activate the first Formula Select field and the price difference to your base product. E.G. Arabica costs €10 a pack, Robusta – our base product – costs €12; in the Formula Select field for Arabica, set -2. You get the idea?

Next you could add an Options Field with a Checkbox – For a Value Added Pack that is 20% more expensive than the selected product. In the Import Value settings, add an ID, a text description for the product, set the Disabled Value to 1 and the Enabled Value to 1.2. These are the multiplicators that will later be used to calculate the end price.

Now I could rewrite the complete Formula manual here, but I'll leave you to read it on 1LD's Tutorial Page.

Once you've added The import Values that your product requires, it's time to sit down and work out the formula for your calculation. If you write it down on a piece of paper, it will make things easier for you. Here's an example from our Coffee Sales Page: ((quantity * 12 + input-options) * value-added-pack) * (input-tip / 100 + 1). The formula includes a tip for the delivery driver.

Formula can calculate Addition, Subtraction, Division and Multiplication. The Formula is added to the stack with child stacks and in the settings panel, you need to set the Type of Segment – which also includes Import Value, Number, Parenthesis and Custom Expression.

I suggest that you set up Formula on a blank page – it gives you more room to work. Once you have your Input Values set up and your formula calculates the correct values, it's time to format your stack. The main settings panel gives you a choice of three Calculator Themes plus an additional Custom setup.The default theme is a light coloured theme, themes 2 and 3 are dark themes. Custom opens up a range of additional settings for the Background Colour, Borders, and shadow. Below the Custom settings, you'll find Padding values for the Input Fields, The Input Background colour, the Border Styles and Shadows. The Font Family expects a Google Font and has settings for the Size, Weight and Line Height. By default the theme font settings are inherited.

The Output settings Include Decimal Places, and Separators; Labels for the Answer. The Font settings duplicate the Input settings.
But I'm getting ahead of myself…
… the Output Answer also has a dropdown menu with the options Show Below Calculator Input, Show In An External Field, No Answer/Calculator Input Only and Show Answer Only/No Calculator Input.

The option Show In An External Field is of special interest. If you hover over the screenshot above, you'll see that in the second image, Formula is positioned next to a contact form (in this case 1LD's Super Forms). In the last field of the contact form, you'll notice the Total Price of the coffee that is being ordered. All other order details are being passed on to hidden fields within the contact form. Once Miss Jones has entered her contact details, she can click Submit and her coffee order will be sent off to be delivered in time for breakfast next day.

Full instructions for passing the Formula data on to a contact form are included on the Tutorial Page.

Formula is well thought out and will allow you to build the most complicated calculations that you can think of (unless you have a diploma in advanced mathematics). It's ideal for a booking form, small online store, or for calculating the cost of your new bathroom tiling – and it has the added value that the calculation can be passed on to you via email.

Now go forth and make those calculations work for you!


RapidWeaver Project For Profi Photographers

If you're a professional photographer, you probably already know about Shootproof and Pixieset – two websites that will present and manage the sales of your professional imagery. Perhaps you were wondering just how to integrate one, or both of these products into your own homepage.
Gary, at Webdeersign has come up with a solution for both – in a new RW Foundation project.

Webdeersign specializes in prefabricated Foundation projects and his latest Project7 focuses on professional photographers. Even if you are not a photographer, however, you will find P7 interesting – it's a beautiful 'theme'. Gary doesn't like it, when I use the word 'Theme', but as far as I'm concerned – if I can download a project, insert my own data and upload a website with a minimum of exertion on my behalf, it's a theme.

When you download P7, you'll encounter a project with four pages. Don't wait for the first page to load in preview – it won't happen – the first page is 'simply' a page of notes to get you started and nothing on this page will publish. The Home page, however, as with the other pages, is entirely different. It sets out with a full screen Impact slideshow. Impact has the smoothest slide transitions currently available for RW and P7's slideshow is a pleasure to watch.
Don't worry though, if you don't have Impact in your library, you can replace the slideshow with any slider of your choice.
Above the Slider is a Top Bar Navigation that targets the individual BWD sections below – Weddings, Kids, Portraits, About and Contact. You don't shoot Weddings? Just change the name of the section, alter the link in the Top Bar and away you go!

Each section contains a couple of teaser images, each of which links to a Shootproof gallery, and a descriptive text. The About area displays a button linked to the Shootproof galleries, so if your visitor missed the links above, he's sure to get the message now. The Shootproof page loads seamlessly as if it were a part of your site.

The Footer area is interesting – as compact as it is, it contains all the relevant Contact Data, Social Links and a contact form hidden away in a Reveal lightbox.

Instead of a slideshow, Home2 displays a Hero image with the same Top Bar and a prominent button that links to the Shootproof "Client Area". The rest of the page is identical to the Home page.
Home3 is identical to Home2, but instead of Shootproof, all links lead to Pixieset. Pixieset loads just as seamlessly as Shootproof, so your visitor never has the feeling that he is leaving your site.

In case you'd not heard of either Shootproof or Pixieset before, A Shootproof or Pixieset account is required to fully utilise P7. Both are free to setup and no credit card is required by either. Currently Shootproof will host up to 100 photos free of charge. Pixieset will host up to 1500 photos free of charge. If, however, you already have an online distribution solution for you portfolio.
Or if you have a portfolio containing completely different subjects, just alter the links within P7 – there aren't many portfolio solutions that look as elegant as this!.Check out the demo pages and you'll see!


Rails – Single Page RapidWeaver Websites With Ease

Thanks to the iPhone, all smart phones now have swipe actions. Swipe actions are especially useful when viewing web pages, so what better way to display a website than as a single page website divided into sections?
Using any standard RapidWeaver theme it's easy to add endless amounts of content, but there is no simple method of navigating that content. Or is there?
Nick Cates has come up with a Stacks solution that lets you easily transform any RapidWeaver themed webpage into a Single Page website. Rails.

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.

Rails - single page websites

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.

Rails Item

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.


Video Gallery

I'm possibly the only person with internet that has never watched a complete video online. Even software documentation — I only watch a tuition video if no written documentation's available and then fast forward until I find the part that explains exactly what I want to know. Recently, though, I've seen a number of forum posts 'How do I put a video online?' so when I was notified that CosCulture had published a video gallery stack, I was interested to see it.

Eric's Video Gallery supports YouTube, Vimeo and HTML5 video formats. As the name states, the stack places a gallery on your page. The gallery may contain a single video, or multiple videos – I dropped 50 videos into Video Gallery before I got bored with the test. I like the way the videos are presented.

video gallery
A panel for the active video and a description panel with thumbnails for the video list. Both fully configurable.

What surprised me when I first looked at the settings panel, is that the standard top four Stacks settings, Background, Border, Layout, Responsive, are missing.
O.K. That's a new one! You'll need a visibility stack, if you don't want the gallery to load on mobile.

Instead, Video Gallery sets off by requesting Main Gallery Settings. These begin with Show Notes. When loading a child video container, there is a field for notes which may be displayed as in the screenshot above.

Panel Type refers to the panel content – the options are Title Only, Title and Description, Title,. Description and Thumbnail – the info displayed in the gallery list.
Autoplay Video – a very important option that is set to No by default! Thumb Scrolling refers to the gallery list which may be scrolled simply by moving the mouse over it, or by dragging with the mouse/finger. Play Next Video – equally as important as autoplay – is set to manual, but may be set to When Current Video Ends.

External Border refers to the Colour and Pixel Width of the Border around the gallery. The Gallery Width is set to 500px by default and the Alignment is set to Centre. The Thumbnail Width, Thumbnail Height, Row height and the Panel Width can all be set individually. By default the panels set to 45%. The width and colour of the Separator between the video and the playlist may also be set. You must then decide if your video is displayed on the left, or the right of the playlist.

The Selected Row and the inactive Other Rows may be formatted individually, so it's easy to see which video is currently playing. The formatting includes Background Colour, Thumbnail Border Colour and Width, Title Bold, Title Colour, Description Bold, Description Colour, Title Font Size, Title Font Family, Description Font Size and the Description Font Family.

So far, so good, now it's time to add a video. One video container is already in the mother stack, if you click it, the setting options are Video Type, the choices being YouTube, Vimeo and HTML5 Video. If you set either YouTube or Vimeo, the Video ID is required next. If you set HTML5, the panel slides open to reveal MP4 URL, Webm URL, OGV URL, with an option to set a link for each.

Below the video format are fields to add Short Title and Description. If a video thumbnail is found, it will be added automatically. If no thumbnail is found, a link setting appears automatically so that you may set your own warehoused thumbnail.
Once you've formatted your video, you can click the plus button to add the next child stack.

Video Gallery is easy to set up, looks good and has an abundance of settings for personalisation. I never put a video online myself and, strangely enough, none of my clients ever requested me to, but if I ever get into the situation, I'll be taking another look at this stack


Overlay Menu

Exactly one month ago, 1LD released a unique menu stack — Action Menu. Today Overlay Menu flattered into my inbox. Overlay Menu hovers at the top, or the bottom of your page and, when opened, displays a full page overlay with your navigation links.

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.


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.