HotDoodle extensively uses preprocessed CSS.  CSS is a formatting approach to web pages, but the CSS standard is limiting. HotDoodle uses a more dynamic and cleaner "tpl" Style Sheet that is preprocessed into standard CSS.

Example: Consider something as simple as the primary font color - it might actually be referenced numerous times

body {
 color: BLACK; }
input, textarea, select {
  color: BLACK; /* =MAIN_FONT_COLOR= */
}

It is cleaner to define it once, {$MAIN_FONT_COLOR}, and reference whenever needed. A section at the top of the Style Sheet could define the colors and fonts and then trust the pre-processor to place them where needed.

Example: Consider common elements such as the control bar. If the CSS for this were copied into each look there would be a maintenance problem with each change, and those who had custom looks would be out of luck.

It is much cleaner to insert a {include file="common/_standard_elements.tpl"}, and let the pre-processor pick up the standard definition for these elements.

Example: Consider conflicting circumstances that might occur with the body background for the entire site being a poor choice for the text editor frame. It is much cleaner to have a CSS with declarations such as

{if $editor}
  text-align: left;
  background-color: {$MODULE_BODY_BG_COLOR}; /* MODULE_BODY_BG_COLOR */
  width: 600px;
  border: 0px;
 {else}
  text-align: center;
  background-color: {$BODY_BG_COLOR}; /* =BODY_BG_COLOR= */ 
  {if $BLOCKISH}
   border: 8px double {$MODULE_TITLE_BG_COLOR}; /* =MODULE_TITLE_BG_COLOR= */
  {else}
   border: 0;
  {/if}
 {/if}

IMPORTANT: HotDoodle TPL must use [ ] brackets instead of { } brackets for CSS declarations in order to work correctly with the HotDoodle engine. Curly brackets are reserved for pre-processing variables and statements such as {$HOVER_BG_COLOR}.

Example:

• Regular CSS

a.navlink_topnavfancy:hover { /* Used in both Top Nav Buttons and Top Nav Fancy */
 background-color: #F8F9C7;
 color: black;
 text-decoration: none;
}

• HotDoodle CSS

a.navlink_topnavfancy:hover [ /* Used in both Top Nav Buttons and Top Nav Fancy */
 background-color: {$HOVER_BG_COLOR};
 color: black;
 text-decoration: none;
]

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