ThemeFlood.

Introduction

A theme with possibly one of the most sophisticated navigation designs available on the market. Retract is a theme design that includes expert-level features; like Bootstrap, Font Awesome Icons and FreeStyle banners. The innovative navigation design makes it easy for your website users to move around your website on any device.

Navigation

The Retract theme has a beautiful side navigation with sub-levels. This creates a more content-focused layout. Right arrows show the menu-items which have a sub level of page links available and the number of subpages is shown. It gives completed pages an 'app like' feel. Adding subitem counters make navigating your menu even easier. The menu can be on the right side (default) or on the left side.

Within the theme style options, you can change the colours of the menu background and links. No complicated code is required. Plus you can add content above or below the menu links, using ExtraContent.

By default the menu is fixed, so it’s always visible when you scroll down. Other options exist to change the positioning of the menu.

Customising the 'Menu' label

The Hamburger menu icon is displayed on all screen sizes, in this theme. Some users to your website might not understand how to open the menu on their computer or device. Therefore to maintain excellent levels of usability, we accompany the hamburger menu icon with the word 'Menu'. This is applied using CSS code. It is very easy to use custom CSS code to change this word to something else:

#hamburger:before {
	content: 'Menu';
}

Just change the word Menu for your own word, in the above code. Alternatively if you are certain that you want no label text shown, there's a miscellaneous style setting available that lets you hide this text label completely.

Flexible Banner

It's the first thing website visitors see and frequently the first element of the page most RapidWeaver users want to change. Thankfully, the banner area in Retract is easy to work with and provides a very flexible space to do almost whatever you want with!

Using RapidWeaver 7 or above? To insert your own banner image you simply need to drag and drop it into the Banner Image box, within the Page Inspector. The theme will do the rest of the setup for you.

Within the Banner Configuration settings, you can optionally toggle between using ExtraContent 6 or a FreeStyle banner. Both of these are documented in the ThemeFlood knowledgebase and offer you incredible flexibility.

It is possible to cover the Banner Image with a dark or light gradient (for a better readability of the site title and slogan). Or add a text shadow (black or white) to the site title and slogan. The white text-shadow gives a letterpress effect.

In the Theme Styles is an option to hide the Banner Image, Title, Slogan & Logo. Now only the Menu, ExtraContent1 and the footer are visible. Using Stacks (not included with the theme) you can design your own page layout.

Sidebar

There are 3 options for the sidebar: left (default), right or hide. When hidden, the main content container will span the full width of the main container. There are several colour options for the sidebar too.

ExtraContent

ExtraContent allows you to add more content then RapidWeaver typically allows. You can learn more about ExtraContent in the ThemeFlood Knowledgebase. There are 6 ExtraContent areas in this theme:

• ExtraContent 1 is at the top right or left. Great for social media icons with the built-in Font Awesome Icons, a text-line, a search field (for example with RapidSearch) a date-time script or something else.
• ExtraContent 2 is on the bottom of the banner image, always centred. Great for social media icons with the built-in Font Awesome Icons or a short amount of text.
• ExtraContent 3 is between the content and the footer.
• ExtraContent 4 is at the top of the menu panel (click on the 'hamburger' icon to show it). Great for social media icons with the built-in Font Awesome Icons, a text-line, your logo, a search field, a date-time script (read the manual) or whatever.
• ExtraContent 5 is below the menu, in the menu panel.
• ExtraContent 6 can be selected for use in the Banner Configuration settings and can be used for any content you wish to embed into the banner area.

Fonts

The Retract theme comes with a lot of fonts to choose from. Font faces can be applied independently to the site title, headings, body content and navigation. We provide a mixture of 'web safe' font faces and a large selection of embedded font faces. Every font face listed supports latin extended character sets. Embedded fonts use the newer WOFF2 format.

Width

In the theme style setting you can choose between different container maximum widths (900px, 960px, 1000px, 1100px, 1200px, 1300px and auto).

Responsive Design

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. To try it for yourself, do to the demo site and narrow your browser window. Or check it on your smartphone or tablet device. A website created with this Retract will work reliably in all modern browsers.

Logo

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

Font Awesome Icons

With Font Awesome Icons you have several hundred icons at your disposal, in any colour and any size you like. And they are completely free for commercial use. Font Awesome Icons are optimised for retina displays.