A HotDoodle Theme 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.

This page covers how to edit the variables.

First, you will need to get a custom theme as described in the section on Creating a Custom Theme

Changing colors and fonts can be done from the top part of the TPL. You might see a declaration such as the following:

{assign var=LINK_FONT_FAMILY value='"ms sans serif", sans-serif, verdana, arial'}
======================================================
== Site Color Legend
======================================================

{assign var=BODY_BG_COLOR value=WHITE}
{assign var=CONTENT_BG_COLOR value=#f9f1ef} // defaults to BODY_BG_COLOR
{assign var=HEADER_BG_COLOR value=WHITE}  // defaults to   CONTENT_BG_COLOR

{assign var=MODULE_TITLE_BG_COLOR value=#F8F9C7} // defaults to MODULE_BODY_BG_COLOR
{assign var=NAVBUTTON_BG_COLOR value=#663300}   // defaults to MODULE_BODY_BG_COLOR
{assign var=HELP_BG_COLOR value=#HELP_BG_COLOR}
{assign var=MAIN_FONT_COLOR value=BLACK}
{assign var=MINOR_FONT_COLOR value=#A88D97}
{assign var=MODULE_TITLE_FONT_COLOR value=BLACK}
{assign var=NAVBUTTON_HIGHLIGHT_BG_COLOR value=#663300}
{assign var=HOVER_BG_COLOR value=$MODULE_TITLE_BG_COLOR}
{assign var=LINK_FONT_COLOR value=blue}
{assign var=NAVLINK_FONT_COLOR value=BLACK}
{assign var=MANAGEMENTLINK_FONT_COLOR value=#CC66CC}

The catch is that not all of the variables will be present in any one look. Variables that are missing will have defaults assigned to them.

To see all the possible Look Variables and Defaults
Scroll down the configure custom look screen and there will be tables showing all variables assigned in your look and some documentation on them and on where they got their values.   Scroll down forther and there will be a list of all possible variables.

Note. The variables are powerful enought that some looks differ only in variable assignments. For example, the looks with title prefix “clean_” have simple font, width, or color changes - that were probably made simply by changing the assignment to some of these variables.

Changing Menu Background Color:

• This can be done in some cases by setting a style, but most menu background color changes are best accomplished by customizing the look.
• Consider the menu that appears across the top of many of the templates. Opening the menu shows that it uses the Top Nav Button view.