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.
9 comments:
Recently just been setting this up myself, great advice and made it really easy for a novice at HTML
Dear Andreas!
Thanks for your article. Could you please answer the question if it is possible to change somehow with the help of classes the constant color to the background image I prepared for my template?
If yes – then how can I do this? Thanks in advanced,
Liko
Thanks for this tips.
After such good tutorial even me ( php noob ) can modify this template.
More tutorials or even noob section needed ! hehe :)
Cheers!
thanks for this.
Now i know how to create my own style :D
Found the tutor little tricky. First of all it stunned me with the effect of simple change of layout, but in the end it fails by having multiple .html files with different names though. Then I came into idea that jQuery for example could easily take this behaviour of links to change layout. But nice idea though. This is what I got from this tutorial.
Regards Pawel
Hi Andreas,
a bit of advice needed really about the way web pages are linked together. From what I can see it isn’t covered in your tutorials.
In the multi options v1.0, which is the one I have been playing about with. If I wanted, say 5 other pages on the website. From the homepage I would have to make 5 links to those other pages. If I clicked on say page 3 button/link from the homepage, then on the page 3 html I would have to make links to pages 1 2 4 5 & the homepage (is this correct?). Or is there a simple way of doing this. The reason I ask is because, If I had a website with 100 pages, it would take a whopping amount of time !
One other question, what is the difference between the index.html & the homepage.html are they the same thing ?
Thanks.
PS, I am determined to get a website up and running very soon. I hope with your expert advice I may just do it.
We’re on the project to create “news portal” css templates.
This post are very helpful for us.
Thanks Andreas.
Does your theme support multi column options? I mean, i can option to use the layout 1 column, or 2 column one for content, one for widget, or three column layout
How easy is it to have the options column on the left and the body on the right?
thanks