How re-skinning works

One of the useful features of RWSkinz is the ability to quickly apply a child theme or 'skin' to the RWSkinz framework. These free themes are expertly designed by experienced web designers. Therefore a skin offers a quick method of applying eye-catching colour and style to completed webpages. The end result is a webpage that has all the hallmarks of having been masterfully created by a skilled professional.

These skins will help teach you the fundamentals of quality web design and give you what we call in the industry "a designer eye". You'll learn how even the subtlest changes in colours or typography can have a big impact on the overall feel of a completed webpage.

There are a growing number of websites offering free Bootstrap themes for download. Additionally some interactive websites exist, whereby you generate your own themes online. One of the best websites to get started with is Bootswatch: https://bootswatch.com/

Here you can preview a choice of ready-built themes. These can be downloaded for free and applied to your project.

Download a theme by clicking the 'download' button. Often you will see a page in the web browser comprising solely of Bootstrap CSS. However you can easily click File > Save As in your web browser, and download this source code as a file. Give it a new name like my_skin.css or similar. RWSkinz is happy to use either minified or non-minified themes.

Within RapidWeaver, open the Resources window. Add your newly generated CSS file as a resource.

Next, go to Settings > Code > Head and add a CSS link like this:

<link rel="stylesheet" media="all" href="%resource(my_skin.css)%">

Replace my_skin.css with the name of the Bootstrap theme you just downloaded, so it matches the name of the resource. Now within just a matter of seconds, your website will take-on an entirely new professional appearance.

You can reduce the overall file size of completed pages by unchecking the Load Bootstrap From Theme option, in the Miscellaneous settings. The theme will switchover to solely using the Bootstrap CSS you supply via a skin or child theme. Now your pages will load even faster, without the overhead of duplicate code.

Many of the Bootswatch themes call embedded fonts from Google fonts. If you are not keen about this, then it is perfectly feasible to edit the theme CSS to remove these font calls (they are normally towards the top of the source code). RWSkinz has numerous fonts built-in already, which you can choose to use instead.

What happens if no skin is applied? RWSkinz will simply fall-back to using default Bootstrap styling. It is possible to roll your own basic skin design, by using the Self-Generated Skin settings and combinations of other theme settings listed.

Changing navigation and footer bar colouring

Bootstrap has ten main classes of colour scheme for items like the navigation bar and footer; named things like primary, secondary, success, danger etc. In the Miscellaneous settings, you have some sliders for changing the classes applied to these components. In some skins or themes, these sliders will radically change the colour scheme you see applied.

About this page...

This page is using the Cyborg theme from Bootswatch. The only changes made to the RWSkinz settings included turning on Bootstrap navigation bar at the top of this page, turning off the banner image, turning off the sidebar, and turning off the CSS RWSkinz normally uses if no skin is applied.

Approximate time to re-skin this page ≅ 30 seconds!

The rest of this page demonstrates some of the Bootstrap components we were able to successfully re-skin, with this new child theme. Cyborg is one of the more 'extreme' Bootswatch themes available to download. It could be good to use for something like a photography portfolio or film making showcase. There are other themes available with lighter colour schemes.