User Guide

Custom Look > Understanding HotDoodle TPL .vs. CSS

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;
]

Understanding Class Cascading

HotDoodle truly uses cascading class definitions and multiple class definitions. Consider the following two divs:

generated by the article modul

<div class="moduletitle article_moduletitle">[$moduletitle]</div>

generated by the bulletin board module

<div class="moduletitle bb_moduletitle" >[$moduletitle]</div>

Note: Both use moduletitle and then they use a class specific to their block type. Anything in the definition of moduletitle applies to both but something in article_moduletitle applies to just one. The definition that wins depends on the rules of CSS.

Consider the following definitions:

.bb_moduletitle [color: red; font-weight: bold;]
.moduletitle [color: blue; font-size: x-large]
.article_moduletitle [color: green]

An article would have x-large bold green text.
A bulletin board would have x-large bold blue text.

Why blue, should it not have been red?

Well, the rules of CSS say that when all else is equal the last declaration in the CSS file wins. The declaration for .moduletitle was last, as a result the color it specifies wins.

The order of reference is irrelevant. The following are exactly the same:

<div class="moduletitle bb_moduletitle" >
<div class="bb_moduletitle moduletitle" >

Note: What matters is the order of appearance in the CSS files.