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


Variable Declarations and CSS Declarations

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

Understanding Class Cascading

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

  • generated by the article modul

<div>[$moduletitle]</div>

  • generated by the bulletin board module

<div     >[$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="modtitle bb_modtitle">
<div class="bb_modtitle modtitle">

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

© 2006 - 2015 Metabyte, Inc., All Rights Reserved, Patents Pending

http://www.hotdoodle.com, HotDoodle™ Custom Web Design and Quality Affordable Website Designers for Small Businesses and Professionals
Powered by http://www.hotdoodle.com, HotDoodle™ Custom Web Design and Quality Affordable Website Designers for Small Businesses and Professionals
Custom Website designs for Self-edit Sites Site Map