A HotDoodle Look Template file (.tpl) consists of two primary parts:

• The first part is a header area, or top part, with declarations for various variables such as fonts, colors, and widths. Even those who do not know CSS can often change these successfully.
• The second part is a section that is mostly CSS except with variable references. This is not easy to change by those who do not know CSS.

Editing this CSS portion of the TPL  should be considered if you really want full control of your Look. It is the more technical approach and we strongly suggest to first to consider making a custom Look by editing the variables, since changing these values can have a dramatic change on a website’s look without having to go deeper into the CSS.

Important: If you plan to edit the CSS declarations in a look it is very important that you read the TPL of the selected Look at least once. HotDoodle TPL has unique CSS standards - there is much more about how our CSS works within these look definitions than there is in this user guide. HotDoodle recommends printing and reviewing the first 20 pages. The TPL can be printed by copying and pasting the text into a text editor of your choice.

To see which CSS styles are responsible for the formating of an element, do one of the following:

• Open the template or site in a browser, and View Page source to see the names of the styles being applied to different elements on the page. Then search for these styles in the TPL for editing.

For example, if you wanted to change the formatting of the sidebar menu on this site, do a view source and search for the phrase "Look CSS". You will find that it is presented in the HTML as follows:

									
<tr><td class="navbutton" 	style="padding-left: 20px">
   <a href="?section=523" class="navlink navbutton 
     navlinkcurrent navlinkcurrentbutton">Look CSS</a>
   &nbsp;
</td></tr>

From this you might guess that the classes related to 'navbutton' and 'navlink' would be a good place to modify.