ThemeFlood.

Introduction

A molten-hot colour scheme, fluid layout and a ground-breaking feature set combine to make Volcano a brilliant new RapidWeaver theme; ideally suited towards use in business, marketing, software, and e-commerce websites. Not only does Volcano look great on the surface, but this responsive theme functions brilliantly well on desktop browsers, tablets, smartphones and even print output. The speed, flexibility and customisability of Volcano has to be seen to be believed; so be sure to take a look at the live website built using Volcano and download the free demo version.

Volcano has been meticulously engineered from start to finish. Inside this highly customisable theme, you can change all aspects of the colour scheme, easily switch navigation layouts, change the physical structure of pages with up-to 27 ExtraContent containers, create fixed footer containers and setup immersive banner containers in just a few clicks. Like all other premium ThemeFlood themes, Volcano provides plenty of useful style settings to do all the basics. Built-in support for the complete Bootstrap toolkit, embedded fonts and Font Awesome Icons elevate the possibilities of this theme even higher.

Volcano is exactly the same RapidWeaver theme that we use for the Stacks4Stacks website.

Colours

By default, Volcano uses a vivid lava-orange colour scheme, contrasted against a dark grey header bar. Normal content is presented in dark grey text with red underlined links (to aid accessibility) and is set against a flat white background. Just about every colour used in this theme can be customised in the theme style settings. The degree to which you can change theme colours enables you to create brand new custom colour schemes radically different from the default. So even if you think the current colour scheme is a little too 'hot' for your tastes; the chances are you can easily create a new colour scheme more to your liking! This is especially important if you’re building a website on behalf of a client, and need to match mockups or corporate colour schemes provided to you.

Title bar

The title bar in this RapidWeaver theme spans the full width of the page, and is located at the top. This title bar accommodates the website title, an optional logo image and optional menu navigation links. You can choose to have the title bar scrolling (which is the default behaviour) or fixed, meaning that the title bar remains in the same position, with page content scrolling underneath. The title bar is available in a choice of heights.

Fonts

Volcano provides a dizzying list of web safe and embedded font faces. Font faces can be independently applied to the site title, headings, navigation and body content.

Every font shown support latin extended character sets. Web safe fonts are called from the system and embedded font faces are served in WOFF2 format from within the theme. Volcano has no invasive font-calls to external websites or font foundries. All the fonts listed are opensource, free for personal and commercial use.

Banner

The banner container in Volcano is extremely flexible. It can be configured in your projects to work in one of two possible ways:

Method 1
You can do like we've done on the Stacks4Stacks website and create a vector banner. This is achieved by applying a pure CSS gradient (using the theme settings) and choosing one of the min-height banner height settings (e.g. 450px tall). Using minimum heights ensures that text or other content inside the banner will not get cropped on smaller screens, but the banner can still enlarge to a greater height if required (like if an end-user puts up the font size in their web browser). Optionally a block of content can be put in ExtraContent4 and / or ExtraContent5. This sort of banner is extremely lightweight and is no more than a few bytes of code (meaning that it loads exceptionally fast). Font Awesome icons placed in ExtraContent4 or ExtraContent5 will automatically be 'super-sized' (unless they're in a button or given a class of .small).

Method 2
The second option you have for banners is to go-with the conventional open source FreeStyle banner approach. This lets you incorporate static images, video, maps or a slideshow. To do this, switch the banner height to 'auto' in the theme settings. Use the normal FreeStyle banner technique (documented in the theme user guide) or the FreeStyle stack (provided free with this RapidWeaver theme) to quickly and easily embed your banner content. The banner will resize to the height of the FreeStyle or ExtraContent3 content; and any content placed in ExtraContent4 or ExtraContent5 will be layered over the top using absolute positioning.

Through either methods, you have the power to create stunning banners. Banners which grab the attention of your readers and can be made to look unlike any other RapidWeaver theme. By customising the gradients or bringing in your own media via FreeStyle, you can quickly work towards building your own RapidWeaver theme appearance unlike anything else.

Placing a Font Awesome icon in ExtraContent4 or ExtraContent5 will render it as a large (2000%), semi-transparent icon over the banner background:

<div id="myExtraContent5"><i class="fas fa-star"></i></div>

If you prefer, you can use your own PNG or GIF icons instead. The theme will attempt to scale custom images and icons in these two ExtraContent containers responsively for you.

Totally fluid

Volcano is built as a mobile-first, fully responsive / flexible RapidWeaver theme. Padding specified in percent and generous theme max-width settings ensure that your completed designs look awesome on large cinematic monitors, but still scale down to fit smaller screens comfortably. By swapping pixels for percent, we've been able to build arguably one of the most flexible RapidWeaver themes to date. When you resize a browser window displaying a website built with Volcano, you'll notice immediately how smoothly the entire page design scales and the ability to maintain all the correct proportions around elements. No ugly jumping or shifting of content.

The sidebar container in Volcano can be positioned on either the left or right (similar to other ThemeFlood RapidWeaver themes) and is available in a choice of fluid widths, ranging in 5% increments from 10% up to a maximum width of 50% wide. By default, the sidebar is set to hidden (none) for a more minimalist appearance. Alternatively the sidebar can be set as a block below the main content container. There are easily enough flexible sidebar settings in this theme to suit most requirements. On mobile and print output, the sidebar container is moved to down-below the main content container, to conserve space.

Superb print output

A lot of RapidWeaver themes fail really badly when it comes to printing; frequently resulting in horrible messy printouts which are as good as useless. Volcano includes special CSS code for printing. This code hides nonessential items like backgrounds and page navigation links. Complicated layouts like columns, sidebars and floats safely degrade to a single column. Easy-to-read font faces and colours are applied, together with extra features like displaying URL's after links (so people receiving a printout of your website can go back and visit the links later). It's these small details that can make a big difference.

Flexible Footers

Footers are frequently a neglected element in web design. However in Volcano, you can build footers which are altogether more powerful and useful. ExtraContent containers 11 through to 26 allow you organise content (like text, images, video, links and social networking icons) into responsive Bootstrap columns. On smaller screens, these columns automatically dissolve to single columns. Use the Preview ExtraContent Containers option in the theme Miscellaneous style settings to see where these containers are positioned, and then use the normal ExtraContent technique to get your content in.

Volcano is the first RapidWeaver theme available with something called a 'fixed footer'. This can be turned on in the Miscellaneous theme style settings. When activated, your footer container will be permanently 'glued' to the bottom of the page. The rest of the page will slide over the footer, until you scroll to the bottom. The demo website provides a great example of the fixed-footer idea, and another example is shown below in the video. The theme does all the complicated mathematical calculations and layout code for you, dynamically as the page is loaded or resized.

Style settings

As you have come to expect in many ThemeFlood RapidWeaver themes, Volcano includes many useful theme style and colour settings. These let modify and tweak many aspects of the theme appearance. The free demo version of Volcano available to download from this page will give you a full insight as to what's available. You may be pleasantly surprised at just how flexible this RapidWeaver theme actually is. Beyond the basics, Volcano adapts well to being modified with custom code; and we include both a custom.css and custom.js file for global custom CSS and Javascript code. All part of making your job a whole lot easier.

Navigation

Following the 'mobile-first' methodology, screens less than 996px wide (like smaller tablets and smartphones) always display page navigation links in the form of a toggle / accordion navigation layout; enabling users on smaller touch devices to effortlessly navigate your website and drill-down to all levels with ease. On screens greater than 986px wide, you have the choice to display your website navigation links as an animated drop-down menu (default setting), as a split navigation layout, or as a sidebar block navigation layout. Numerous style and colour settings exist for all.

Changing footer localisations

The language of the 'currently viewing' and 'last updated' labels is customisable into any language using the following custom CSS code:

#lastUpdatedLabel::before {
    content: 'Last Updated';
}

#breadcrumbLabel::before {
    content: 'Viewing';
}