Site Builder: Onsite Theme Editor

From HostBaby Wiki

Jump to: navigation, search

Contents

OnSite Theme Editor: Overview

Watch a 30 Second Video Tutorial: http://vimeo.com/19710331

With the advanced theme editor, you can edit every minutiae of your website's look and feel. That being said, it can take some patience and know-how to achieve the desired results.

You can grab the top of the theme editor and drag to anywhere on your desktop.

When you make changes in the theme editor, you will be prompt to name your template. You can view and delete your templates from the SELECT THEME page.

To delete or bring up one of your custom themes:

  1. Choose the theme you saved your templates from.
  2. Scroll down to the bottom of the page and you will see a list of all your custom templates.
  3. Click on the link to activate it or the "X" to delete.

If you are a light computer user and need help customizing your site, feel free to give us a ring for tech support and advice. 1.888.448.6369

ThemeEditor.jpg

Body

The Body editor controls the big stuff, like your background color for the whole site and the font for the whole site. Changes here will be global across the site.

When you save your changes by clicking the SAVE button at the bottom, a pop of window will alert you to rename your theme. You can make different versions of each theme saving them as you go and then chose the one that works best for you from the theme selection page.

ThemeEditorBody.jpg

BACKGROUND

Image Attachment:

  1. Fixed allows your page background and content to scroll as one.
  2. Scroll allows the body/content of your website to scroll independent from the website background.

Background Color:

  1. Just click in this area to bring up the color picker. You can type in a web hexagon color or use the slider and click in the color box to choose.
  2. Click "no color" to make your background transparent.

Image:

  1. Choose New Image: Guide you to the image library or upload one from your computer.
  2. Use None: No image will be used
  3. Use Default: Takes you back to the default image.

Image Position: Sets the starting position of a background image.

Image Repeat: By default, the background-image repeats an image both horizontally and vertically. Some images should be repeated only horizontally or verically, or they will look strange.

  1. repeat: Will repeat an image both horizontally and vertically.
  2. repeat x: Repeats image only horizontally.
  3. repeat y: Repeats image only vertically.
  4. no-repeat: The background image will not be repeated.

FONT: Choose from a variety of font from this dropdown menu.

LINKS: This globally effects the links in your content not your navigation.

  1. Color: Choose from the drop down menu or type in your hexagon web color number.
  2. Decoration: You can choose from a variety of font decoration choices.
    1. None - Plain text.
    2. Underline - The link will be underlined.
    3. Overline - A line the length of the hyperlink will appear above it.
    4. Line-through - A line will run through your link.

HOVERED LINKS:

  1. Color: The color your link will have when the mouse rolls over it.
  2. Decoration: You can choose from a variety of font decoration choices.
    1. None - Plain text.
    2. Underline - The link will be underlined.
    3. Overline - A line the length of the hyperlink will appear above it.
    4. Line-through - A line will run through your link.


In the banner area you can customize your site with any image you choose.

BannerImage.jpg

BANNER IMAGE: This will be the image at the top of your page by your site Title.

  1. Choose New Image: Click on this link to go to the image library or upload one from your computer.
  2. Use None: No image will be used
  3. Use Default: Takes you back to the default image.


Image Repeat: By default, the background-image repeats an image both horizontally and vertically. Some images should be repeated only horizontally or verically, or they will look strange.

  1. repeat: Will repeat an image both horizontally and vertically.
  2. repeat x: Repeats image only horizontally.
  3. repeat y: Repeats image only vertically.
  4. no-repeat: The background image will not be repeated.

Border: This will go around your entire image or just the bottom of the image depending on the theme you have chosen. Click on the color window to enter your web hexagon number or choose any custom color by dragging the slider or clicking in the color box.

Site Title

The title area refers to the text and background of your website title. Here you can choose fonts, font-size, colors, and more for your Title. You can even upload your own background image.

ThemeEditorTitle.jpg


BACKGROUND

Image:

  1. Choose New Image: Guide you to the image library or upload one from your computer.
  2. Use None: No image will be used
  3. Use Default: Takes you back to the default image.


Image Repeat: By default, the background-image repeats an image both horizontally and vertically. Some images should be repeated only horizontally or verically, or they will look strange.

  1. repeat: Will repeat an image both horizontally and vertically.
  2. repeat x: Repeats image only horizontally.
  3. repeat y: Repeats image only vertically.
  4. no-repeat: The background image will not be repeated.

Visibility: You can choose hidden or visible for your title image.


LINKS: This effects the links in your TITLE only. Click on the box to drop down the color palette

  1. Color: Choose a color from the drop down box or type in your hexagon web color number.


HOVERED LINKS: This is what you see when the mouse rolls over your title.

  1. Background Color: This will affect the background of your title (possibly this is your band name or website name). Just click in this area to bring up the color palette. You can type in a web hexagon color OR click and drag the circle in the color palette.
  2. no color: Click "no color" to make your background transparent.
  3. Color: This will change the color of your title when the mouse rolls over it.


FONT: The font used for you title.

  1. Typeface: Choose from a variety of font from this drop down menu.
  2. Font Size: Talk about easy as pie! Just slide the bar to change the size of your font.
  3. Font Style: Click on the drop down box to choose from italic, normal or oblique.
  4. Font Weight: Click on the drop down box to choose from normal or bold.


TEXT

Text Transform:

  1. Normal: Defaults to how you typed the title in when you created the site.
  2. UPPERCASE: All letters are capatalized.
  3. Capitalize: The first letter of each word will be capitalized.
  4. lowercase: All letters will be lowercase.
  1. Color: The color your link will have when the mouse rolls over it.
  2. Decoration: You can choose from a variety of font decoration choices.
    1. None - Plain text.
    2. Underline - The link will be underlined.
    3. Overline - A line the length of the hyperlink will appear above it.
    4. Line-through - A line will run through your link.

Navigation

The Navigation Bar is your page menu. Here you can set specifics how your menu looks.

Naviagation.jpg


LINKS: This changes the color of your links in your menu bar.

  1. Color: Choose from the drop down menu or type in your hexagon web color number.
  2. Typeface: Choose from a variety of font from this drop down menu.
  3. Decoration: You can choose from a variety of font decoration choices.
    1. None - Plain text.
    2. Underline - The link will be underlined.
    3. Overline - A line the length of the hyperlink will appear above it.
    4. Line-through - A line will run through your link.

Text Transform:

  1. Normal: Defaults to how you typed the title in when you created the site.
  2. UPPERCASE: All letters are capatalized.
  3. Capitalize: The first letter of each word will be capitalized.
  4. lowercase: All letters will be lowercase.


HOVERED LINKS:

  1. Background Color: The background of the box that surrounds your web site title.
  2. no color: Click "no color" to make your background transparent.
  3. Color: The color your link will have when the mouse rolls over it.
  4. Decoration: This is the same as above.

Widget Regions

The Widget editor controls the fonts, colors and background associated with any widgets you install.

ThemeEditorWidget.jpg

BACKGROUND

  1. Background Color: This changes the color of your whole widget area except the background behind the title. just click in the drop down box area to bring up the color picker where you can choose a color or type in a web hexagon color number.
  2. no color: Click to make your background transparent.


Titles: This will change the color of the titles in your widgets.

  1. Background Color: The background of the box that surrounds your widget title.
  2. no color: Click "no color" to make your background transparent.
  3. Text Color: This will change the color of the title in your widget area. Click on the box to bring up the color palette.
  4. Typeface: Choose from a variety of font from this drop down menu.
  5. Font Size: Talk about easy as pie! Just slide the bar to change the size of your font.
  6. Font Style: Click on the drop down box to choose from italic, normal or oblique.
  7. Font Weight: Click on the drop down box to choose from normal or bold.

Content

The content editor effects the content (text, pages, pictures) that you insert on a particular page. Changing settings here will affect all your pages.

Titles: This will change the color of the titles on your pages.

  1. Background Color: The background of the box that surrounds your title area.
  2. no color: Click "no color" to make your background transparent.
  3. Text Color: This will change the color of the titles in the body of your website.
  4. Typeface: Choose from a variety of font from this drop down menu.
  5. Font Size: Talk about easy as pie! Just slide the bar to change the size of your font.
  6. Font Style: Click on the drop down box to choose from italic, normal or oblique.
  7. Font Weight: Click on the drop down box to choose from normal or bold.


Paragraph: Choose the color you want for the text in the body area of your website by clicking in the drop down box and choosing from the color palette or typing in a web hexagon number.

  1. Font Size: Talk about easy as pie! Just slide the bar to change the size of your font.
  2. Text Alignment: This is where you can align the text in the body of your website. Choose from align center, justify, left, or right.

Footer

The footer is the bottom area of your website. You can set background colors, upload an image, or change your font preferences. Edits here only effect the footer area.

BACKGROUND

  1. Background Color: This changes the color of the footer area. Click in the drop down box area to bring up the color palette where you can choose a color or type in a web hexagon color number.
  2. no color: Click to make your background transparent.


Paragraph: Choose the color you want for the text in your footer by clicking in the drop down box and choosing from the color palette or typing in a web hexagon number.

  1. Font Weight: Click on the drop down box to choose from normal or bold.
  2. Text Alignment: This is where you can align the text in the body of your website. Choose from align center, justify, left, or right.


Text Transform:

  1. Normal: Defaults to how you typed the title in when you created the site.
  2. UPPERCASE: All letters are capitalized.
  3. Capitalize: The first letter of each word will be capitalized.
  4. lowercase: All letters will be lowercase.


Audio Player

Theme editor.JPG

The Audio Player Widget has 3 major sections you can edit with the theme editor.

  1. Text Color
  2. Typeface (font of the text on the player)
  3. Theme

Text Color

Textcolorplayer.JPG

Selecting the Text Color section will allow you to change the color of the font displayed on the Audio Player Widget.

Typeface

Fontplayer.jpg

The Typeface section will allow you to change the font on the player to better suit your site

Theme

Audioplayerthemes.png

There are 8 separate themes to choose from:

  • Black
  • Black Translucent (Transparent with darker play button)
  • Brown Dark
  • Brown Light
  • Gray Dark
  • Gray Light
  • White
  • White Translucent (Transparent with lighter play button)
Retrieved from "http://hostbaby.org/wiki/Site_Builder:_Onsite_Theme_Editor"
Personal tools