ThemeFlood.

Introduction

Every now and again, a new RapidWeaver theme comes along that breaks the mould. Studio not only looks fabulous on the surface (think how perfect this theme would be for a photography portfolio) but it also builds-in an incredibly diverse range of theme style and colour settings. This gives you the power to build stunning websites that captivate every website visitor.

Studio may look quite simple on the surface. However it has been carefully crafted using the forefront of latest web design technologies; like flexbox, animations, transitions, embedded fonts and a whole swath other other ground-breaking features. The end result is a robust theme that is likely to give you many years of stellar service.

This RapidWeaver theme is great to use for smaller websites, like a website for a sole tradesperson, artist, illustrator, musician, photographer, filmmaker or creative writer. In the past some users have used Studio for personal homepages, holiday accommodation websites, political campaigning and temporarily landing pages.

2 column layout

The two column layout in Studio is accomplished using some cleaver CSS flexbox code. By default the main page content container is rendered on the left and your RapidWeaver banner image and sidebar get displayed on the right. The righthand side column can be customised in a choice of widths and alignments, within the Studio style settings. On mobile screens (less than 768px wide) you can choose whether to display the content or sidebar first on the page. Pure HTML + CSS code - no complicated or error prone Javascript involved!

Colouring

Studio has a distinctive 'light on dark' colour scheme. Simply because many artists and photographers ask us for themes of this style. However the page background is not totally 'flat'. If you look closely, you can see there is a textured background applied. And indeed, there are many dozens of textured backgrounds built into the theme you can choose to use instead. Links sharply contrast the body content. Enough colour settings exist for you to radically recolour pretty-much the entire theme.

Body backgrounds

Dozens of background textures are available to choose in Studio, and these can be combined with a colour you can change in the theme settings. A key advantage of background textures is they can make webpages look less 'flat' in appearance. Textures give webpages slightly more distinction without distracting too much from the written content or imagery.

Social media icons

These are located in ExtraContent 1 and can be setup with code similar to this:

<div id="myExtraContent1">
    <a href="https://facebook.com/"><i class="fab fa-facebook"></i></a>
    <a href="https://twitter.com/"><i class="fab fa-twitter"></i></a>
    <a href="https://flickr.com/"><i class="fab fa-instagram"></i></a>
    <a href="https://linkedin.com/"><i class="fab fa-linkedin"></i></a>
    <a href="https://example.com/"><i class="far fa-envelope"></i></a>
</div>

The Studio theme automatically renders these links and Font Awesome Icons as small square buttons. There are many other ExtraContent containers available in this theme. You can see where all the ExtraContent containers are located using the Preview ExtraContent Containers option, in the theme Miscellaneous style settings. ExtraContent 3 and ExtraContent 4 are located inside the navigation box.

Innovative navigation

On both mobile and desktop, the navigation links are kept hidden to reduce overall visual clutter. Click or tap the link to reveal a block navigation layout. Pages are organised as a simple sitemap, with subpages slightly more indented from the left. This navigation box includes support for more ExtraContent containers and a search box that can send keywords to your search page located at https://example.com/search/ where 'example.com' is the domain name of the website. Want to change the menu toggle title? This is easily done with custom CSS code:

#menuLabel:before {
	content: 'Click here for more info + links';
}

The navigation box will grow to be the same width as this label text and button. So it may be advisable to include at-least a couple of words, to make it stretch out wider.

Something else you can do is to customise the style and animation of the open / close icon, shown alongside this text label. Some icon types are only shown, depending on the font face applied (some embedded fonts don't carry support for arrow characters). These settings are built into the theme and really easy to use.

Banner

The prominent banner container in Studio is formed using a FreeStyle banner container. This gives you a very flexible space in which to display eye-catching media content above the page fold (hence where the name 'media' came from). This FreeStyle banner container can accommodate static images, slideshows and even video. If you have not encountered the FeeStyle concept before, then check the details in the theme user guide. In RapidWeaver 7 and above, you can also quickly supply custom banner images via the Banner box, inside the RapidWeaver Page Inspector.

Phenomenal font options

Over 125 web safe and embedded fonts for headings, navigation and body content. Plus settings to adjust things like font size, line height and letter spacing. You are sure to find a combination of fonts to suit your content perfectly.

Footer

Studio opts for a simple footer container. This is where you could include additional copyright information about your artwork or page navigations links. The text label on the 'last updated' time stamp can be adjusted with custom CSS if required:

#lastUpdated:before {
	content: 'Last updated: ';
}

Likewise the breadcrumb label can be amended with CSS code too:

#breadcrumb:before {
	content: 'Currently at';
}

Breadcrumbs offer a great way of showing a user where they are currently at and links to navigate back up the site tree. If breadcrumbs are not displaying for you, they can be turned on in the RapidWeaver Advanced settings.