ThemeFlood.

Introduction

The original Magnetic RapidWeaver theme (released in 2008) was designed and developed by Henk Vrieselaar. In October 2019, we embarked on redesigning the Magnetic theme to make it more appealing to a wider range of RapidWeaver users.

Magnetic is made for RapidWeaver 8 and above. This is because the Magnetic theme uses some new theme API features not available in older versions of RapidWeaver. For example, all the colour pickers support RGBa and there are special number boxes to precisely adjust things like breakpoints and sizing. This makes Magnetic easy to customise and extensively flexible.

The new Magnetic theme has a blocky, asymmetrical appearance. The 'light on dark' colour scheme makes for a distinctive design. You'll note that we have embraced modern design techniques like the use of embedded font faces, gradient backgrounds and generous spacing around different elements.

Built with Flexbox

CSS Flexbox is a relatively new method for building webpages and constructing their main layouts. Through use of Flexbox, we have been able to significantly reduce the amount of code needed to display webpages and avoid the complications of things like Javascript for equal-height columns. The whole webpage bends and flexes to comfortably fit different screen sizes.

Loading animation effects

A striking feature of Magnetic are the sidebar and content loading effects. Within the theme style settings you can customise the type of loading effect used and change the speed that the animation runs at. If no animation effect is desired, it can disabled in the settings. Some particular RapidWeaver addons may require the loading effect is disabled, to maintain compatibility.

Font faces

Magnetic includes over 130 web safe and embedded font faces to choose from; for body content headings and navigation. These give your completed webpages additional design flare! All the embedded fonts are stored within the theme contents, so there is never any reliance on third-party services or the danger of your website users being tracked. Plus we have included theme style settings for font size, line height and letter spacing.

Navigation

We envisage most users of Magnetic will be using the theme to construct shallower websites with fewer webpages. With this in mind, Magnetic is designed with a simple block navigation structure. No fancy drop-downs or fly-outs in this theme. The emphasis instead is on extreme usability and the ability to quickly flip between pages with ease.

Customising the mobile menu label

Magnetic has a large and very user friendly mobile menu button. This makes it easier for users of all abilities to quickly navigate your website. By default, the mobile menu button displays the word 'menu' next to the hamburger icon, so users have a clearer idea of what the button does. You can very easily change the word 'menu' to anything you want, though use of this custom CSS code:

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

Enter this code in either the Settings > Code > CSS box or the Page Inspector > Code > CSS box. The word can be changed or translated into anything you prefer.

Breadcrumbs

Breadcrumbs can be set to display at either the top or bottom of your content container. The option to toggle-on breadcrumbs needs to be enabled in your RapidWeaver Site Settings.

ExtraContent

Magnetic has 20 ExtraContent containers, located in numerous parts of the theme. As per normal, just follow the instructions in the knowledgebase for configuring your ExtraContent regions using the stack or code snippet methods.

As a side note, ExtraContent 17 and ExtraContent 18 straddle the bottom footer. ExtraContent19 and ExtraContent 20 are displayed above and below the mobile menu links respectively.