IntroductionA 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.
NavigationThe 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' labelThe 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:
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 BannerIt'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.
SidebarThere 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.
ExtraContentExtraContent 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.
FontsThe 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.
WidthIn the theme style setting you can choose between different container maximum widths (900px, 960px, 1000px, 1100px, 1200px, 1300px and auto).
Responsive DesignThe 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.
LogoThe 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 IconsWith 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.
MoreThe free trial version of Retract can be downloaded using this link. There is no time limit imposed on the demo version, but page navigation links are disabled in the demo version. Watermarks may appear in parts of the page (like the banner or footer). Purchasing Retract provides you with a licensed copy of Retract; without any demo restrictions applied.
Clicking this link will take you to a sample website published using Retract. This may give you a better insight into how this theme looks and behaves. If you're interested to see how the demo website was built, the same project file can be downloaded here and opened in RapidWeaver. Feel free to use this file as the basis for a new website.
If you have any other questions about Retract, please don't hesitate to get touch.