HotDoodle Logo
Customize Website Theme

The theme of the website sets the style of the website including colors, font families, font sizes, widths and heights, borders, the look and feel of the navigational elements including page menus and background colors/images on the website.

Themes can be modified in the following ways:

  1. Select a Different Theme -- Themes can be changed in a website much like switching the faceplate on a cell phone, it does not affect the content, only the presentation, and it can be reversed at any time except with custom themes. See: Select a Different Theme
  2. Adjust the Current Theme -- Backgrounds, colors, and column widths can be adjusted via overrides from the Appearance / Change Background screen. See: Adjust the Current Theme
  3. Create a Custom Theme -- More advanced changes may be made by creating a custom theme from the existing theme. Doing this, however, requires knowledge of CSS. See: Create a Custom Theme

Adjust the Current Theme

Often a theme is suitable for use if it had a different background in a specific section. Here are the sections where backgrounds can be adjusted:

Body Background - The entire web page.

Content Background - The portion with content.

Header Background - The section at the top of the web page.

Sidebar Background - The side portion of the website if a sidebar is used.

Secondary Sidebar Background (Not Pictured) - The other side portion of the website if two sidebars are used.

Main Background - The main portion of the web page content.

Footer Background - The section at the bottom of the web page.


The more complex the theme, the more difficult it is to adjust. To take control of the backgrounds and colors, try setting the website to one of the themes with "clean" or "basic" in the name. Themes named clean or basic do not have elements that interfere with easy adjustments.


Adjust the Theme Background Image

Steps: How to Adjust the Theme Background Images

1. From the HotDoodle Toolbar, click on the "Appearance" tab.

2. Click on the "Change Background" button.

The Configure Website Theme Backgrounds page appears. The top section of this page provides information about the various areas that can be adjusted within HotDoodle web pages. Edit controls for each of the areas appear below this section.

3. To modify image settings for an area of the website, click on the corresponding “Edit this background” link below the field of the area to edit.

The edit background dialogue box appears.

4. Follow the lettered instructions below to upload an image for the background:

a. Click on the "Upload" button to select a new background image.

b. Click on the "Choose File" button in the Quick Image Upload pop up window and navigate to the image to upload. Then, click on the "Open" button.

c. Type the maximum size for the image to appear in the Width and Height fields.

d. Click on the "Upload This Image" button.

e. Use the Layout and General controls to modify the alignment or size of the background image. A preview of the background appears in the lower half of the pop up window.

5. Click on the "Save" button to save the adjustments or click on the "Cancel" button to close the edit window without saving the changes.

6. To return an area to the default settings of the theme, click the corresponding “Reset to default” link below the field of the area to return to the default settings.

7. Click on the "Save" button at the bottom of the page to apply all of the changes and view them on the website.


Adjust the Theme Background Colors

A color can only be chosen/used as a background if the theme uses a color currently for that background area. A color cannot be chosen if the theme uses an image for that background area because an image is given precedence and will be displayed over a color selection.

Steps: How to Adjust the Theme Background Colors

1. From the HotDoodle Toolbar, click on the "Appearance" tab.

2. Click on the "Change Background" button.

The Configure Website Theme Backgrounds page appears. The top section of the page provides information about the various areas that can be adjusted within HotDoodle web pages. Edit controls for each of the areas appear below this section.

3. To change the color settings for an area of the website, click on the corresponding “Edit this background” link below the field of the area to edit.

The edit background dialogue box appears.


4. Follow the instructions below to change the background color:

a. Click on the paint bucket icon in the General box.

b. Click on a color swatch provided in the pop up window, or enter a hexadecimal number for the color to use.

5. Click on the "Save" button to save the changes or click on the "Cancel" button to close the edit window without saving changes.

6. To return an area to the default settings of the theme, click on the corresponding “Reset to default” link below the field of the area to return to the default settings.

7. Click on the "Save" button at the bottom of the page to apply all of the changes and see them on the website.


© 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
Quality Website Designers, You Edit Site Map