Which CSS Style to Edit

If you review the HTML source of a Tiki site, you'll see that it uses hundreds of CSS styles for everything from the title of a blog post to a wiki page description to a module title. Additionally, the average Tiki site may use styles from multiple CSS files.

When customizing your Tiki theme, how can you determine which styles to change? By using a web browser utility such as Firefox Developer tools (for Firefox) or IE Developer Tools(for Internet Explorer).

For example, assume that you wanted to customize the size, color and font of the default Tiki h2 heading:

The default H2 heading.

1. Using Firebug for FireFox (or the Developer Tools for Internet Explorer), select the element on the page that you want to customize. In this example, we'll select the heading text Congratulations.
2. When you select the item in your browser, the Firebug console displays the HTML element information for the selected item, including its styles. Notice that the Congratulations text is defined by the h2 element.
   
   

   The Firebug console displays the selected item's element and attributes.
   
   Notice, too, that the element gets some attributes from the fivealive.css stylesheet and others from the lite.css stylesheet.
3. Using one of the methods described previously, create a new definition for the h2 element:
   
   Customizing the H2 element

   h2 {
        font-size:3.0em;
        color:#ffff00;
        font-family: serif;
        }

4. Reload the HomePage of your Tiki. The headings are now larger, yellow, and in a serif font.
   
   

   Your new, customized heading.