Home > Demo > How to get started using Web Builder Express > How to change the colors of your site's styles

To change the colors of your site's styles (breadcrumb area, menu area) 


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.

 
Learn more

Guaranteed. Try Web Builder Express and enjoy our "60 Day Risk Free Guarantee".

You get a remarkable list of features with Web Builder Express at a great price.

Frequently Asked Questions.

You can take many different approaches to building and managing your web site. Which is right for you?

How to determine if you need a content management system.

Detailed comparison of different content management system vendor's features and costs.

What is important to you when building your web site?

Sign up now and start using Web Builder Express immediately.

webbuilderexpress.com
1201 Greene Square
Celebration, FL 34747
Contact Us
toll free phone: (877) 290-9407
fax: (440) 378-6546

Privacy Policy - Copyright Policy - Site Map Copyright 2002 - 2010 Web Builder Express