ThemeFlood.

Introduction

Web trends have dramatically changed and technology has greatly improved, yet clean web design has remained consistent and beautiful. The Stripped theme uses the smallest amount of images, colours, shapes, values and lines. Its 'stripped down' to the fundamentals required to convey your message.

It may look very simple on the surface, but Stripped hides a phenomenal choice of powerful style options. For any artists, photographers, architects, film makers or business owners seeking a clean and minimalist theme, Stripped is certainly a worthy candidate. There is a sense of fun to go through the style options in RapidWeaver and click to see what each one does!

Responsive

The internet isn’t just on your computer screen anymore. It’s also on your phone, tablet and laptop. So when you visit a webpage published with Stripped, the content responds to the device on which it is being rendered. Stripped is a fully responsive theme design.

Background

The theme has three background patterns built-in or choose any colour for the background.

If you want to add your own custom background pattern or texture with an image, you can use some custom CSS code like this:

body { 
background: url(%resource(pattern1.jpg)%) repeat left top;
}

Menu

Stripped has a drop-down menu with only one sub-level on your desktop and mobile device. Down-arrows show the menu-items with a sub-level for clear navigation through your website. Stripped is best suited for smaller websites, with less pages. Of course, you can still manually create links to other pages not featured in your menu. Within the theme style options, you can choose from six different menu positions: menu in the body (left, centre, right) or within the container (left, centre, right). Plus you can apply optional border lines or backgrounds to the menu.

If you want to apply a background pattern to the submenu background, use this custom CSS:

header nav ul ul {
background: url(%resource(pattern1.jpg)%) repeat left top;
}

And to the mobile menu too:

header nav ul ul,
.mean-container .mean-nav { background: url(%resource(pattern1.jpg)%) repeat left top;
}

ExtraContent

ExtraContent allows you to add more content then RapidWeaver typically allows. Stripped has 6 ExtraContent areas:

• ExtraContent 1 is between the menu and the Title
• ExtraContent 2 is between content and footer
• ExtraContent 3 is below the footer.
• ExtraContent4 (by default disabled) can be used for a responsive slider created with Stacks or a custom-coded slider (e.g. Bootstrap Carousel)
• ExtraContent 5 is by default disabled too. It's a slide-out panel (built-in) below the menu. You can add text, stacks an/or images into the ExtraContent 5.
• ExtraContent 6 can be used for a responsive slider created with Stacks or a custom-coded slider (e.g. Bootstrap Carousel). The menu is rendered over or below the image/slideshow.

If you are new to the idea of ExtraContent, their is a chapter available to read in the ThemeFlood knowledgebase, including download links for free code snippets and stacks.

Logo

The logo and site title are assigned the link to your homepage. By default the logo is above the menu (with the optional of being aligned left, right or centred), when enabled in the Miscellaneous > Show Logo settings. There's also an option to replace the site title with your logo. A logo of any size can be used, although typically smaller ones work better.

Font Awesome Icons

Font Awesome Icons are built into this theme. Nothing further needs to be downloaded or configured (just make sure you have CSS Consideration enabled in your site advanced settings). Font Awesome gives you instant access to over 600 quality icons optimised for retina displays. Because the icons are handled as text, you can easily recolour and resize them. And they are completely free for commercial use.

Toggle Icons and ExtraContent 5

You can setup a toggle container at the top of this theme. By default the Toggle Icon and ExtraContent 5 are hidden. Go to the theme settings Show ExtraContent 5 & Toggle Bar and click on one of the buttons to enable the toggle bar. When you preview the page, an arrow is shown at the top. When you click on the down-arrow in the toggle bar nothing happens, because we haven't added an ExtraContent5 yet.

Add some ExtraContent to your page (using either the stack or code snippet) and set it to embed into ExtraContent 5. Now you will see this content appear in the toggle bar, when you go back and previewing the page.

By default the toggle icon is a down and up arrow font-awesome icon. It's straightforward to add any other Font Awesome Icon. Go to the Font Awesome Icons website and select icons you want to use. Next to the icons is shown the unicode value. For example, heart icons have the unicode f004 and the open heart icon has unicode f08a. Use this custom CSS code and modify the unicode accordingly:

.hv-toggle a.toggle-trigger:before { 
content: "\f004";
}

.hv-toggle a.active.toggle-trigger:before {
content: "\f08a";
}