HotDoodle Support

The layout of the website sets the areas of the website in which content can be inserted. These areas include headers, footers, sidebars, and main content areas of the website. The widths and images of these sections are controlled by the theme, but the layout is what determines if the section will be included and what blocks will appear in that section.

Layouts can be modified in the following ways:

Create Columns -- The Container Block can be used to create columns within sections that already exist. See: Create Columns
Select a Different Layout -- Layouts can be changed in a website much like switching the faceplate on a cell phone, it does not affect the content (but some content might not be displayed if it is in an area such as a sidebar that is not in the new layout), and it can be reversed at any time. See: Select a Different Layout
Set a Per-Page Layout -- The layout can be changed for just one page of the website. See: Set a Per-Page Layout
Adjust the Layout -- The areas in the website in which content can be inserted within headers, footers, and sidebars can be adjusted via overrides from the Appearance / Layout Content screen. No technical skills are required for this operation. See: Adjust the Layout
Create a Custom Layout -- More advanced changes may be made by creating a custom layout. Doing this, however, requires knowledge of HTML. See: Create a Custom Layout

Create a Custom Layout- Getting Started

HotDoodle provides a variety of layoutfor many uses. However, creating a unique layout or modifing an existing layout may be prefered. This is an advanced operation and requires knowledge of HTML.

Note: To create a custom layout involves editing a currently existing HotDoodle layout, since it’s easier to modify an existing template than build one from scratch. All Looks defined in HotDoodle are displayed on the Custom Look screen. The TPL files appear long since they contain extensive comments to make it easier for to find what to modify or override.

First, select the layout closest to desired look.

In Edit Mode, click on the "Appearance" tap and then click on the "Select Layout" button.

On the current layout, find the "Copy and Customize this layout" link.

Give the layout a name and save
The layout will now be able to edited

Layout Details

Layouts are preprocessed HTML files with callouts to replacable content. The site choses a layout that is the default for all pages, but each page gets to chose a layout variation if needed. These choices really just affect which HTML file will be preprocessed and used to present the page.

Layouts have a few things such as the control bar that really should be present. Other things like the headers generally should be present but might be omitted if the layout is intended for use as a pop up.

Example Layout

Here is the full text from a layout

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
{hotdoodle_header}
 
<body onLoad="hdJSinitialize();"  {background} >
{showManagePage oneliner=true}
{sourceSelectorInfo}
<table align='center' cellpadding='0' cellspacing='0' border=0 {background type='content'}> 
 <tbody> 
     <tr valign="top"> 
        <td {background type='header'} valign="top">
            <!-- Insert title area content here -->
            {header_layout} 
         </td>
     </tr>
     <tr  valign="top">
         <td {background type='main'} valign="top">
           <!-- main content area1 -->
           {main_layout}
        </td>
     </tr>
     <tr>
        <td {background type='footer'}> 
           {footer_layout} 
      </td> 
    </tr>
 </tbody>
</table> 
{showManagePage}
</body>
</html>

In this layout, a HTML table defines three insertable areas (header, main, footer), but for the content to insert in these it uses a callout to HotDoodle. A different layout might use divs or have different elements.

The following are the callouts available for use in a layout:

http://s1.hotdoodle.com/userguide3/?section=425