ThemeFlood.

Introduction

A stylish and sophisticated RapidWeaver theme. Banx is loaded with a vast array of customisable style settings and colour pickers that make building and deployment of a professional-grade website extremely simple.

Banners

You can opt to use any banner image of your choice dragged and dropped into the RapidWeaver Banner Box, within the Page Inspector (RapidWeaver 7 and above). Within the Banner Configuration settings, you can set the height of your banner to between 200px tall and 1000px tall. Banner images setup using this method are rendered as CSS backgrounds and stretched to contain the whole banner area. Dragged and dropped banner images can either occupy scrolled positioning or can be 'fixed' and resist being scrolled with the rest of the page.

Want something a bit more advanced? Banx supports an Extra Content container (ExtraContent 4) within the banner region, for embedding some content. Alternatively you can go into the Banner Configuration settings and enable support for FreeStyle. Developed by ThemeFlood, FreeStyle is a popular technique for getting static images and slideshows embedded within theme banners. You can can read more about both ExtraContent and FreeStyle in the ThemeFlood knowledgebase.

Sidebar

Sidebars are really useful to display less-important information and extra links (like social media buttons or document downloads). Banx has a simple sidebar setup; with the choice to float the sidebar either left or right of your main content. On mobile, the sidebar is stacked above the main content container and enclosed with a border line. Several colour pickers exists for sidebar-specific content. Alternatively you can disable the sidebar altogether, within the theme settings. Disabled sidebars can actually be useful, if you prefer to build your own page layouts with a free-flow plugin (like Stacks).

Navigation

Screens less-than 768px wide (like smartphones and some smaller tablets) will display a 'hamburger' icon at the top left of the page. Tapping on this reveals a toggle navigation menu. Users are able to traverse different levels of the website and easily tap to access pages. The toggle menu has big buttons and links, to make touchscreen navigation a whole lot easier.

On desktop, the menu takes the format of a drop-down menu. You can either float the menu links left or right. Subpages are displayed in attractive drop-down menu's. Again the system is setup to make navigation easier for your website users.

To display arrows or carets next to your page links (to denote that subpages exist), you can double-click the page names in the RapidWeaver sidebar and enter Font Awesome markup like this:

<i class='fas fa-angle-double-down arrow'></i>

The theme is clever and will automatically hide icons in the breadcrumbs, sitemap and mobile menu. There are several different arrow and chevron icon designs to choose from, on the Font Awesome website.

ExtraContent

ExtraContent allows you to add more content then RapidWeaver typically allows. If you have not used ExtraContent before, take a look at our tutorial in the ThemeFlood Knowledgebase. There are 4 ExtraContent areas in this theme:

• ExtraContent 1 is on the banner image, slideshow or video. Use this area for some text lines, a date or time script or something else.
• ExtraContent 2 is between the content and the footer.
• ExtraContent 4 is below in the sidebar. For example when you would like to have a stack in the sidebar. ExtraContent 4 is hidden by default. You can use this area for a banner, slideshow or video when you don’t use another banner type. ExtraContent 4 can be turned on in the Banner Configuration settings.

Fonts

Banx includes the RWFontKit plugin, granting you instant access to over 100 web safe and embedded font faces. So you can easily find and apply heading and content font faces, to match the style of website you are building. By default, we use a very attractive embedded font called 'Merriweather' but you can easily change this to something else.

Several options are also provided in Banx to adjust other aspects of fonts, like font size, font weight and letter spacing for different elements.

Scroll To Top Button

A Scroll-To-Top Button (any colour is possible) fades in at the bottom right (or optional bottom centre) on your page when you scroll down. You can hide it in the theme styles settings, or have it only show it on mobile devices. For content-heavy pages that are quite long, this is a useful feature.

Responsive

More and more people are coming to your website using handheld devices. The traditional fixed-width design doesn't work any more. Web design needs to be adaptive. The layout needs to be automatically adjusted to fit all display resolution and devices. Banx is a fully responsive RapidWeaver theme. This means the same website can be consumed by people browsing on smartphones, tablets or mobile devices. The days of needing to build separate websites for different devices are gone, when you use a theme like Banx.

Logo

The logo and the site title have a link applied to them, that points back to the homepage of your website. By default the logo is above the site title. Optional you can put it a logo within an ExtraContent area or the sidebar.

Font Awesome Icons

With Font Awesome Icons, you have over 1000 icons at your disposal, in any colour and any size you like. They are completely free for commercial use. These icons are also optimised for retina displays; therefore ensuring they always look pin-sharp.

Translating the mobile menu button

The Banx theme displays the word 'menu' next to the mobile menu toggle button (hamburger icon). This text label is easily translated into another language using this custom CSS code:

#mobileNavButton .mobileMenuToggleTitle:before {
	content: 'Menu';
}

The CSS code can either be added in the Site Settings > Code > CSS box, or within the Custom CSS box within the Page Inspector. Change the word 'Menu' to whatever you want.