Custom Looks > Styles
HotDoodle Looks contain pre-configured special styles for all Block Styles, which can range from border patterns or shading around a Block, to font size or specific positioning of Block Content.
To see an example of this feature, choose any Block – in this case a General Block:
- In Edit Mode, select the General Block Edit button | Style
A list of selectable and unique checkboxes will appear - clicking the Preview All Available Styles link will display how each checkbox will modify the relative Block. Some of these Style options are governed by the TPL. However, Personality styles can simply be restyled within the Look template - search for the section beginning with “Look specific enhancements.” Every new Look should have each of these Personality styles customized to complement the particular look and feel.
Understanding Styles
Styles are ingeniously simple – it merely requires 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 look 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 you to insert aqua background color wherever a style is used. The {declare_style} line sets this style's position on the block style editing screen. You may add styles and they will automatically show up in HotDoodle.
To see which styles are being applied to the template or website you are working with, do one of the following:
- Open the template or site in a browser, and 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 - you will search for these color codes in the TPL and will be able to recognize which styles use them.
Note: As you implement changes, click "Save this as a custom look and preview it,” which is found below the TPL text field. Then click "Return to main page" to see your changes, or you may wish to have another browser simultaneously open so you can merely refresh the browser to view the edits in the Look.
Declaring Style Arguments:
- style - the core part of the name used in the three style declarations. This is a name that matches the CSS
Ex.
div.style_container_box [
]
.style_moduletitle [
]
.style_modulebody [
]
- 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 you may wish to edit:
- Site Theme Options – sets the Look’s core font size, sidebar width, etc.
- Site Color Legends – most color settings and background images can be changed here. Examples of styles are given, but check the CSS you’re working on 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.
- "module" refers to blocks in our Style Sheet. Therefore, .moduletitle refers to the style of block titles.
- You may see the statement {if $is_ie}… {else}… {/if} in our Style Sheet. This is the style’s attempt to compensate for IE’s non-standard behavior.
- We use cascading, multiple class definitions in HotDoodle. You may see something like <div class="moduletitle text_moduletitle">More Information</div>. Remember the style that shows up last in the Style Sheet overrides other styles.
|
