you need to create before you can edit, so let's go tab by tab in the design section and get your site built!

Changing Text Style
Changing Text Color

Home Page
Internal Pages
Styles and The Hierarchal Order

Templates

Time to suit up!

If what they say is true, and it's the clothes that make the man, then it's the template that makes the site. So let's get fashion-conscious and dress up your ideas. Choosing a template is easy; simply select which template best suits your site and click the “save changes” button in the lower right hand corner:

You will be prompted when your new layout has been successfully saved:

Click the preview button to see your template in action on your site:

If the drop-down menu clashes with your sense of style, simply select a new template and start over again.

There are more templates on page two:

Site Styles

You chose your suit, now it's time to choose the fabric and the colors!

So you love the “Finance Before Romance” Template, but you're just not too crazy about the baby blue drop-down menu buttons. Fair enough. The site styles section allows you to change a template to your liking so that you can avoid a Joan Rivers fashion rant. Design elements adjusted under Site Styles Tab will apply to the entire site. To start off, click the site styles tab and choose which element you want to edit.

Once you click the site styles tab, you will see buttons for each major area of a web page:

The following tabs (Home Page and Internal Pages) will follow the same pattern. You will be able to adjust each element (header, footer, body, etc.) the same way across all tabs. So let's start with adjusting the header element:

As you can see, there are several icons on the header button...

Template Default:

This, as the name suggests, toggles the default template design settings on and off. So, if you make a lot of design changes today, but you want to go back to the original template's design tomorrow, you can by clicking this button off. See the hierarchal order information below to learn more.

Text Edit:

This icon edits the design of the text that appears in, in this case, the header element.

Background Edit:

The Background Edit icon adjusts the area behind the text in an element.

Changing The Text Styles

Let's start by adjusting the text of the header by clicking the Text Edit icon:

As you can see, there are five "text styles" within each element:

Body Text Style: The text style for the body of the content.
Active Link Style: The text style for a link.
Hover Link Style: The text style for a caption over a link when the cursor hovers over it.
Clicked Link Style: The text style for a link once it's clicked.
Visited Link Style: The text style for a link already clicked,

Each "text style" is adjustable the same way, as it's already highlighted, we will just edit the "Body Text Style":

The "body text styles" toolbar at the top will allow you to make any changes to the text in the highlighted box. As you make the changes, the text within the box adjusts to reflect the changes made. In the above example, the body text style has been emboldened, in the cursive font, at 24 pixel font size, transformed all in uppercase lettering, and the text color is red.

All of these changes can be made simply by adjusting the "body text styles" toolbar.

Changing The Text Color

In order to change the font color, click the rightmost box to in the "text styles" toolbar:

The Color Picker will appear:

Here, you can move the cross hairs around and bar up and down to select the perfect color.

Notice the two swatches in the upper right hand corner within the Color Picker. The color swatch on right hand side indicates the current color of the background. The color swatch on the left hand side indicates the color you are changing to. You will also see the boxes under each swatch. The boxes on the left hand side (R=Red, G=Green, B=Blue) and the right hand side (H=Hue, S=Saturation, B=Brightness) correspond to the color swatch that is being changed. The # box below tells you the code for the particular color that is being changed (the left-hand swatch box). This allows you to change your colors across the site without having to hunt for the color again. Simply type in the color code as needed across your site.

When you are happy with your color pick (as indicated in the left hand swatch), click the color icon in the lower right hand corner:

Your color will be changed (as confirmed in the right hand swatch). Click anywhere outside of the Color Pick Editor and save your selection.

Now that we have the text designed the way we like, let's do something about that background color...

To start, click the Background Color icon:

This will take you to the background styles page:

Here, you can set an element's background as either a color or an image. To select an image, click the choose image icon and follow the instructions here.

To select a color, click the color icon:

Follow the same steps as before with selecting your color from the Color Picker.

Home Page

Excuse me while I go freshen up in the powder room...

It's the face of your site, so we'll devote an entire tab to perfecting your home page. No need for Botox or collagen implants here, though—all you need is a click of the mouse to beautify your home page. Design elements adjusted under Home Page Tab will only apply to Home Page and will override any changes made under the Site Styles Tab. .Let's get started!

We've already reviewed a lot of the changes that you can adjust within the prior design tabs. Aside from the aforementioned Background Color changes and Text Color changes, the Home Page Design Tab also includes a Template Default button that can be toggled on and off:

This button simply places your template back to its default position, so any changes made will not be implemented. Here's a tip: if you aren't seeing your changes being implemented, make sure your Template Default Button is switched “Off”.

Once again, you can always click the preview button to see your changes in action.

Internal Pages

No guts, no spotlet!

Since a pretty face will only get you so far, the guts of your site should be just as snazzy, too. This tab of the Design Section allows you to change the styles of the internal pages within your site. The layout is the same as the home page and the adjustments akin as well. Design elements adjusted under Internal Pages Tab will only apply to ALL Internal Pages (every page save the Home Page) and will override any changes made under the Site Styles Tab.
Once again, make sure the Template Default Button is switched to “Off” before implementing changes. The preview button (

) is at your disposal as well.

Styles And The Hierarchal Order

As mentioned before, changing an element's style under one tab may affect a change made in another tab. So what happens if you change a body text style under the Site Styles Section and change the same thing under the Internal Styles Section? Well, there is a hierarchy within the Design Section, so the Internal Style would override the Site Style. Basically, the more specific style changes are kept. The order of the hierarchy is as follows:

Internal Styles AND Home Styles > Site Styles

And there you have it; your spotlet screams “You!” So, now that you're savvy with your stylin', let's move on to adjusting your settings.