Already a member?
Sign in
Welcome! This is a website that everyone can build together. It's easy!
- EasyEdit
- Edit tags
- Email page
-
(what's this?What are these tools?
People just like you can add or edit the content on this site. If you want to try editing, but aren't ready to add to this site, try our demo area.
Read more about editing pages at Wetpaint Central.
)
Image Header
This tutorial shows you how to place an image header in place of the current text header. To see how to make an image header to use, click here
Click the template tab and go to the page element view. Click 'Add a Page Element' and select the picture option. Click browse and select from your computer the picture you just created, make sure that you uncheck the box that says 'shrink to fit'. To make it easy to find in the next step, place the element you just created above the body element.
Click on 'edit html' and then click 'expand widget templates'. Scroll down until you find the code for the picture you just added. It will look something like this:
If you have trouble finding it, search for div id='main-wrapper' this signifies the start of the code for the main column which is where you placed your picture. Under the code the starts the main section find . Depending on how many pictures you've put on your blog it may not be image1 but something like that. As in the picture above, cut (make sure you cut, not copy) this code and paste it over this code:
You have just pasted your picture code on top of the code for the old header. Make sure that the code is moved, not just copied. You can check to see if it is in the right spot by going to your 'add element' view and see where your picture is, it should look like this:
To remove the default background for the header delete the following highlighted code from your template:
You now have a custom header!
Click the template tab and go to the page element view. Click 'Add a Page Element' and select the picture option. Click browse and select from your computer the picture you just created, make sure that you uncheck the box that says 'shrink to fit'. To make it easy to find in the next step, place the element you just created above the body element.
Click on 'edit html' and then click 'expand widget templates'. Scroll down until you find the code for the picture you just added. It will look something like this:
If you have trouble finding it, search for div id='main-wrapper' this signifies the start of the code for the main column which is where you placed your picture. Under the code the starts the main section find . Depending on how many pictures you've put on your blog it may not be image1 but something like that. As in the picture above, cut (make sure you cut, not copy) this code and paste it over this code:
You have just pasted your picture code on top of the code for the old header. Make sure that the code is moved, not just copied. You can check to see if it is in the right spot by going to your 'add element' view and see where your picture is, it should look like this:
To remove the default background for the header delete the following highlighted code from your template:
You now have a custom header!
Latest page update: made by normc
, Dec 6 2006, 1:35 PM EST
(about this update
About This Update
Edited by normc
2 words added
8 words deleted
4 images added
4 images deleted
view changes
- complete history)
Edited by normc
2 words added
8 words deleted
4 images added
4 images deleted
view changes
- complete history)
More Info: links to this page
