How to use the Multi Options template styles
The latest free template release, Multi Options, allows template users to combine a set of options into hundreds of different designs. In order to help you get started with the template, here is a quick tutorial on how the options work.
The starting point: index.html
First of all, make sure to download a fresh copy of the Multi Options template. After you have unzipped the template into an own folder, this is what the default style of index.html looks like in the web browser:
Applying styles using body classes
The Multi Options template has only one CSS file, and the file (multi-options.css) is only 6 Kilobytes. But it is written in a way that offers a lot of easy customization possibilities. To try the different options, you only need to edit one line of HTML. Open index.html in a code editor, and look for this line:
<body class="orange">
This is the main body tag, and the magic happens using the class=”orange” part. By adding or changing body classes, you tell the browser to apply different parts of the stylesheet to the HTML content when displayed in a web browser. There are three types of body classes that you can add:
1. Layout width
Four different layout widths are included. The first one is the default width, 980 pixels. Unless you load a body class that changes this width, the layout will be 980px wide by default. To modify the width, add any of the following classes to the body tag;
- w600px
- w760px
- w1200px
These classes changes the layout width to 600, 760 or 1200 pixels.
2. Color
Nine color options are included. If you don’t use any body class that defines the color, then no color is applied. In the default style (index.html), the class “orange” is added. The other color classes are:
- blue
- red
- green
- purple
- black
- yellow
- pink
To use both a width class and a color class, add both classes to the body tag like this:
<body class="w1200px red">
3. Font
There are seven defined font classes in the CSS. By default, the sans-serif font Tahoma is used. To change the font, add any of the following classes to the body tag:
- georgia
- helvetica
- arial
- verdana
- times
- courier
All fonts are common web-safe fonts that should work with all browsers on all operating systems. If, for any reason, a font would not work, there is a fallback cal to the default serif/sans-serif/monospace of the viewer.
Adding a font is just as easy as adding width and color classes. This is what it could look like:
<body class="w1200px red georgia">
Review the result in your web browser
If you add the three classes above, this is what the template will now look like:
If you would try a different combination, such as class=”w600px pink courier”, the design would look dramatically different:
Create your own styles
Adding your own styles is not difficult. Look at the CSS file to see how the included classes are written. You can adjust any of the existing colors by modifying one single value (in hexadecimal). For example, to make the blue color darker, scroll down to the .blue classes and edit the default blue color (#467aa7) to #2a5a9a and then save the CSS file. If you use body class=”blue”, you will now get a dark blue color instead of the lighter blue that I added.
I hope that this will give you some inspiration to play with the body classes and find your own combination among the styles that the Multi Options template includes. If you are missing something specific or need help, post a comment here or in the support forum and I will do my best to help you.
This article was written by Andreas Viklund
Web designer, writer and the creative engine behind this website. Author of most of the free website templates, along with some of the WordPress themes.