HotDoodle Logo
Custom Theme: Look Variables

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

 


Adding Comments

Modern looks have a header with a
    block-assign var=discard_all_of_this 
    /block_assign
block.

Whatever goes in here is ignored and excluded from the CSS other than the side effects of things in curly brackets such as the assignments.

So you do not need // or /*, but may want to add them anyway as a matter of style.

CSS Validation

If the formatting suddently goes weird, you probably started and forgot to close a comment.

The Custom Look screen has a 'Validate" button.  
    Use It !


Contents of the Top Part

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.

© 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
Professional Web Design for Websites you Can Edit Site Map