Home > Demo > How to get started using Web Builder Express > How to change the header graphic on your web site

How to change the header graphic on your site



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 may 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.

 

Important:
Before you change the header graphic, make sure that the new header graphic has the EXACT SAME dimensions as the current header graphic.  If the dimensions are different, the items on your site may not align properly.  You can check the dimensions of your current header graphic by brining up your web site in a browser.  Right click on the header graphic, and select "Properties". You will see the Dimensions (something like 760 X 130).  Make sure your new header graphic has the EXACT SAME dimensions.

 

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 the "H" icon (for the header) beneath the template that currently has the radio button (round button) to the left of it filled in.

 

4. On the "Headers" page, look for the header that currently has the radio button (round button) to the left of it filled in.

 

5. Click on the Wrench icon beneath the header that currently has the radio button (round button) to the left of it filled in.

 

6. Select "Images" from the pop up menu

 

7. On the "Images for header" page, click on "Add image" link and add the file that contains the new graphic file for your header.

 

8. Click "Back" at the bottom of the page.

9. You will once again be on the "Headers" page.  Look once again for the header that currently has the radio button (round button) to the left of it filled in - the same header you selected in the step above.

 

10. Click on the Wrench icon beneath the header that currently has the radio button (round button) to the left of it filled in.

 

11. Select "Properties" from the pop up menu

 

12. After your follow the critical tip above about copying text from edit boxes to Notepad, continue here: 
In the text box, change the reference to the image from the old header graphic file (listed as  "wolverine-header-2.jpg" in the example below) to the name of the new image name you just uploaded.

Important:  Do not change the path text that precedes the image references (i.e. do not change the part that reads "="{PATH}/images/".  Also, make sure that you don't delete the quote mark after the image reference.


 

13. Click on the "OK" button to save the change.

14. Republish all pages

15. 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