On the CSS side, we load different css files depending on the page that loads and on the color style we want: dark or light.
How to change a title/font from css
We recommend using the FireBug add on in Firefox for a fast identification of the css properties that you might want to change. Lets say for example that we want to change the color and add a link to the h1 represented in the picture bolow.
Open the style.css file form the root folder and search h1 until you find the color property in the file. Its on line 236 and it looks line this:
h1, h2, h3, h4, h5, h6 {
font-weight:normal;
font-family: ‘FolksRegular’, Arial, sans-serif;
color:#f4f4f4
}
Change the color with the one you want and hit save. Note that you’ve changed the color to all the headings (h1, h2, h3, h4 and h5). If you want to change only the h1 color, you have to separate the h1 and give it another color. The css should look like this.
h2, h3, h4, h5, h6 {
font-weight:normal;
font-family: ‘FolksRegular’, Arial, sans-serif;
color:#f4f4f4
}
h1 {
font-weight:normal;
font-family: ‘FolksRegular’, Arial, sans-serif;
color:#custom color
}
Now, lets say we wanted h1 to poin to http://google.com. At this point the h1 looks like this:
<h1>5 Ways To Impress Your Boss (H1)</h1>
To make it point to a specific URL the h1 must look like this:
<h1><a href=”http://www.google.com”>5 Ways To Impress Your Boss (H1)</a></h1>
You can make changes to the css to any elements. You just need to know the name of the element or div either by using FireBug or by opening the HTML and then search for that element in the css. Piece of cake!
This template comes in 2 styles:
Light – the default one
Dark
