How to use the Freestyle template options
Freestyle (layout #6)
Layout width classes: (none) and “wider”
Freestyle includes two separate grid systems with different widths, both supporting 12 columns. The two options are 960 pixels and 1200 pixels. By default, the 960px grid is used. To use the wider 1200px grid, find this line in the HTML:
<body>
Apply the class “wider” to this element by rewriting the code into:
<body class="wider">
Save the changes, and when you view the template in a web browser it will now have a wider page layout. To switch back to the 960px width, simply remove the class “wider”. The width of all rows and columns used in the grid will adjust automatically.
Color scheme classes: (none) and “light”
Using the same principle, you can switch from using a light text on a dark background (which is the default option) into an inverted option with dark text on a light background. This is done with the body class “light”, like this:
<body class="light">
This works independently from the layout width, and you can use multiple body classes if you want to combine a wider layout with the light colorscheme. To do this, just add a second class to the body element:
<body class="wider light">
Removing the class “light” switches the color scheme back to using the dark background.
Link color classes: (none), “blue”, “pink” and “orange”
Finally, there are four different accent colors included, that can be applied using the same principle as above. The color option is used for links and header texts, and the default color is red. To change to a different color, add any of the classes “blue”, “pink” or “orange” to the body HTML element. Again, this option works independently from the layout width and the dark/light color scheme, so it can be applied as a third body class if wanted:
<body class="wider light pink">
If no color class is used, the default red color will be used.
And this is only the beginning…
It is perfectly possible to add more colors, new grid widths and new backgrounds. And body classes makes it easy. For example, if you want to add a new color, say “green”, you can add these two lines to the bottom of the freestyle.css file:
body.green a {color:#3eb438;}
body.green h1, body.green h2, body.green h3 {color:#3eb438;}
Then simply add class=”green” in the body HTML element to use it on your site.
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.
3 comments:
How if we want to use unique font in our template so the font will be appear on every computer, even though if the computers don’t instal the font yet?
Thank you so much
That is where webfonts and @font-family becomes useful. See this post for an introduction to @font-family (which is basically the ability to use fonts hosted on your server or on a service like Google Webfonts, instead of using fonts installed on the users computer).
Oh i see, thank you so much,
I will try it soon … :)