Critical Tip - Save Programming Code Text Before Changing It:
As part of the instructions below, you will be changing programming code. The programming code appears as text in boxes on the Web Builder Express pages you will use in this section.  For your reference, programming code looks like the text in the box that is circled in red below:

It is easy to make mistakes when changing programming code.  It is critical to save a copy of the programming code text before you change it.  That way, if you do make a mistake, you can go back to the last version of the programming code that worked.

To save a copy of the programming code text:
- Select all the text with your mouse.  You will need to scroll up or down to make sure you get all the text.

- From your browser menu, select "Edit", and then "Copy". 
- Now, open up the "Notepad" application on your PC.  You can usually find Notepad by selecting Start, All Programs, Accessories, Notepad.

- Put your cursor into the Notepad application, and from the Notepad menu, select "Edit" and then "Paste".
- You now have a copy of the programming code text in Notepad.  Keep this text until you know that any changes you make below work exactly as you want them.

- In the event that you make changes that do not work exactly as you want them, copy the text out of Notepad and paste it back into the box you changed.  This will "undo" your change.

Instructions:

1. From the Main Action Menu, select: "Advanced Features", then select "Site Design Settings"

2. On the "Standard Templates" page, look for the template that currently has the radio button (round button) to the left of it filled in:  It is most likely at the bottom of the page, under Custom Template, and is most likely called "Sample". 

3. Click on the Wrench icon beneath the template that currently has the radio button (round button) to the left of it filled in.  Select "Styles".

4. Find the style that controls the color of the web page item you want to adjust.  Here is a list of some of the styles, and what they control:

.td5 controls the horizontal bar across the top of the page that holds the breadcrumb trail
.td6 controls the vertical bar that holds the site menu

Enter the hexidecimal number that represents the color you want to place on the site. 

In the example above, the .td5 tag (which controls the horizontal bar across the top of the page that hold the breadcrumb trail) has a baground color set to the hexidecimal color #529030.

Some tags you might be interested in adjusting include:

• .search - this controls the attributes of the search box
• .td5 - this control the attributes of the breadcrumb trail
• .td6 - this controls the attributes of the left menu bar

(Note that if you want to change the background color of the complete breadcrumb trail, you need to adjust the background color of the .td5 attribute AND the background color of the .search attribute.)

5. Click on the "Save" button.

6. Republish all pages

7. After the system has republished all your page, open your site in a new browser window.  Click the refresh button to get the new version of your site.

 Return to How to get started using Web Builder Express.

Return to the Summary page.