HotDoodle Themes contain pre-configured styles for all blocks, which can range from border patterns or shading around a Block, to font size or specific positioning of block content. Some of these Style options are governed by a shared TPL across all HotDoodle themes and cannot be adjusted. However, Personality styles can be restyled within each theme - search for the section beginning with “Look specific enhancements.” Every new theme should have Personality styles customized to complement the particular look and feel of that theme.

HotDoodle also offers the flexibility to allow the website owner to create custom styles to apply to blocks. 

Steps: How to Preview Block Styles

1. Click on the  button above the block to edit.

2. Click on the "Style" tab.

3. Click on the "Preview All Styles" button.

4. Click and Drag the Scroll Bar to view all the styles.

5. Click the red "X" to close the Styles Preview window.

6. Proceed to Step 3 below, to select a Style to apply to the block.

Styles require adding classes to the class= declarations. 

Example:

• HTML generated for a text block with no styles set

<div class="container_box"><div style="width: 100%;"   id="cont_2972">
   <div class="moduletitle textsimple_moduletitle">Without a style</div>

<!-- mbodyStart Wrapper (this line) --><table cellSpacing=0 cellPadding=0 class='modulebody textsimple_modulebody'><tbody><tr><td valign='top'>
 This is the body of the block -- a plain text block in this case

<!-- mbodyEnd Wrapper (this line) --></td></tr></tbody></table>
</div></div>

• HTML generated for same text block with the AQUA style set

<div class="container_box Aqua_container_box"><div style="width: 100%;"   id="cont_2973">
  <div class="moduletitle Aqua_moduletitle textsimple_moduletitle">Using the Aqua Style</div>

<table cellSpacing=0 cellPadding=0 class='modulebody <div class="container_box Aqua_container_box"><div style="width: 100%;"   id="cont_2973">
  <div class="moduletitle Aqua_moduletitle textsimple_moduletitle">Using the Aqua Style</div>

<table cellSpacing=0 cellPadding=0 class='modulebody Aqua_modulebody textsimple_modulebody'><tbody><tr><td valign='top'>
 This is the body of the block -- a plain text block in this case

</td></tr></tbody></table>
</div></div>

Note: The only difference is the class= declarations for the Aqua style include class names like Aqua_modulebody, as well as the original class names. As a result, the TPL pre-processed theme could then declare the following:

{declare_style style=Aqua cat=Colors rev=1 desc='Sets background color only'}
div.Aqua_container_box [
 background-color: #CCFFFF;
]
.Aqua_moduletitle [
 background-color: #CCFFFF;
]
.Aqua_modulebody [
 background-color: #CCFFFF;
]

Note: These TPL class declarations allow the website owner to insert an aqua background color on any block that style is selected for. The {declare_style} line sets this style's position on the block style editing screen. Added styles to the theme TPL will automatically show up in on the Style Tab for all block on the HotDoodle website.

To see which styles are being applied to the template or website, do one of the following:

• Open the template or website in a browser, right click and click on View Page Source to see the names of the styles being applied to different elements on the page. Then search for these styles in the TPL for editing.
• Use Mozilla color picker to identify the colors in different areas of the page, then search for these color codes in the theme TPL to recognize which styles use them.

Note: As changes are made, click on the "Save this as a custom look and preview it” button, which is located below the theme TPL text field. Then click on the "Return to main page" button to see changes, or have another browser simultaneously open to refresh that browser to view the edits in the website.

Declaring Style Arguments:

• style - the core part of the name used in the three style declarations. This is a name that matches the CSS

• name – the value that will appear in the styles tab of a block.

• desc – The description that appears when the style had experience a mouse-over action in the styles tab of a block.

• cat – The category in which the style appears in the styles tab of a block.

• order – The relative order within the category in which to display this style.

• break – If 1, thiwill start on a new line when listed in the styles tab of a block.

• catorder – The order in which this style's category will be listed.

• rev - The revision number. If multiple declarations for the same style appear, the one with the highest rev wins.

Important sections and styles to edit:

• Site Theme Options – sets the theme’s core font size, sidebar width, etc.

• Site Color Legends – most color settings and background images can be changed in this section. Examples of styles are given, but check the CSS to see what styles are specified there.

• Containers – the .moduletitle class affects all block elements that are given a title by the user.

Miscellaneous Tips:

• font-size: {$BASE_SIZE|font_size:3} means that the font size is being set to the base size + 3. If the base size is x-small, this style sets the font size for this class to large, which is 3 sizes larger than the base.

• "module" refers to blocks in the HotDoodle Style Sheet. Therefore, .moduletitle refers to the style of block titles.

• When the statement {if $is_ie}… {else}… {/if} is used in the Style Sheet, this is the style’s attempt to compensate for IE’s non-standard behavior.

• HotDoodle uses cascading, multiple class definitions, for instance <div class="moduletitle text_moduletitle">More Information</div>. Remember the style that shows up last in the Style Sheet overrides other styles.

Below is the code used in the HotDoodle theme TPL to create a style that will be added to and be able to be selected from the Styles tab of every block in that website.

{declare_style style=extraTopPadding name='Extra Top Padding' cat='Combination' rev=1 order=975 desc='??????????????'}

div.extraTopPadding_container_box [

                margin-top: 20px;

]

.extraTopPadding_moduletitle [

]

.extraTopPadding_modulebody [

]

Copy and paste the above code at the end of the CSS of the theme TPL.

The text highlighted in yellow is the name to identify the style. Note: this has to start with a letter, it can't start with a number, it also has to start with a lower case with no spaces as shown.

The text highlighted in green is the name that will appear on the Style tab with a check box next to it. This name can have spaces and uppercase.

The text highlighted in blue is the CSS style to apply. Normal CSS rules apply.

The CSS style can apply to:

the whole container under (_container_box)

the module title under (_moduletitle)

the module body under (_modulebody)

In order for the style to work, all three 1.(_container_box) 2.(_moduletitle) and 3.(_modulebody) need to be present even if there is no CSS for some.

In the above code, the padding (margin-top: 20px;) can be placed in the (_container_box) or the (_moduletitle) and have the same effect as long as there is no background image for the moduletitle. If there is a background image for the moduletitle and the padding ( margin-top: 20px;) is placed under (_moduletitle), then the text of the moduletitle only will get padded, but the background image will not. To pad the title, text, and the background image together, place the padding (margin-top: 20px;) in the _container_box.

Most blocks are within a container of some kind

(container_box) is the main wrapper for all containers. It is invoked by itself. e.g.

   <div class="container_box">

Currently, there are no blocks that don't have a container_box around them.

HotDoodle frequently uses multiple class declarations, taking advantage of CSS inheritance for complex styling. Inheritance is useful, but this CSS legacy adherence can make it difficult to track down a single class when changes to the CSS don't produce visual changes in the website. One strategy is to save the web page locally, and then view the local copy in a browser while editing out one class at a time to see which is governing the setting to change.