HotDoodle Logo
Customize Website Layout

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: 

  1. Create Columns -- The Container Block can be used to create columns within sections that already exist. See: Create Columns
  2. 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
  3. Set a Per-Page Layout -- The layout can be changed for just one page of the website. See: Set a Per-Page Layout
  4. 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
  5. 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.

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.

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

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

© 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
Hypnotherapy Website Design Templates and Hypnotherapy Site Designers Site Map