This Message Forum is no longer in use

Please use the new Bravenet Help Forums FOUND HERE

General Forum
This Forum is Locked
Author
Comment
headers

How do you create a different header for each page. I now have the same photo that appears on each page and I would like to change this

Re: headers

You haven't really provided enough information for anyone to give a good answer. It would have been good if you posted a URL so we had something to start with. But, as usual, I will start with some guesses.

This sounds like you are using the Website Wizard for your web site. The Themes have built in pictures, but the Layouts do not. You could add a image to the header on a Wizard Layout, which would then appear in the header on all of your pages.

The Website Wizard is not intended to be a full function site builder. It's only really intended for beginners or users that don't have their own tools for websites. Sometimes your issue can be fixed by adding a little CSS or Javascript to each of your pages. But this also means you need to understanding a little bit about using HTML, CSS, and Javascript. Generally, if you don't know what your doing, it difficult to maintain and not worth the trouble.

Without having more information, I can't guess much further.

Browser: FIrefox

OS: Solaris, Redhat, Fedora, Suse

Re: headers

limited knowledge of websites but have been doing an ok job with trial and error. do not know how to use javscript of have any idea what cs is. So I guess i will continue trying.

Re: headers

Well, not knowing a lot about the web design languages does limit your options. So I looked for something simple that you might be able to use. Here is a link to one of my test sites at philokvetch.bravehost.com. You should see a site with seven simple pages. Each page has a different image in the header. This is accomplished by adding a couple of lines of CSS code to each page. The only difference, from page to page, is the actual image name.

The images are actually relatively small images that are symmetrical, so they can be repeated horizontally without showing a obvious seam. The code below is CSS code that adds the image to the first page. The same code, with the image name changed, is added to all pages.

Code:
<style type="text/css">
#pageHeader {
background-image: url(<span style="color: red;">white-clouds-blue-sky-seamless-background-tile.jpg</span>);
background-repeat: repeat; height: 130px; overflow:hidden; }
</style>


Start by selecting the images and uploading them to your web site. To add the code just open up a page for editing in the Wizard and select one of the content areas. It doesn't matter which one. Then switch to the "Code Editor" mode and copy/paste the code listed above at the very end of any code that might be in the window. Then save your work and go through the publishing process. Use the same process to update each of your pages. Just change the image name for each page.

Beyond that, there no simple way to have a different image in the header on each page, when you design with the Wizard.

Browser: FIrefox

OS: Solaris, Redhat, Fedora, Suse

Re: headers

I understand now after veiwing your site. Still have the following questions:
1. Can you use a photo that you have taken. If you can, where do you upload the photo to to be able to use it as a header
2. To name the image: is that just a name you give it yourself e.g. photo of me, or is it some specific way you must name the image to use it.

Re: headers

any files/images you use have to be uploaded to your file manager area

plus make sure optimized/sized down to an appropriate size to use with your webpage

an image if you give it a name do not use spaces in your file name or other funny characters

so can name it image1 or header1

whether you save as .gif or .jpg as well with your images too


then the code for the image on your site MUST MATCH to the file you uploaded

Re: headers

Lindel
I understand now after viewing your site. Still have the following questions:
1. Can you use a photo that you have taken. If you can, where do you upload the photo to to be able to use it as a header
2. To name the image: is that just a name you give it yourself e.g. photo of me, or is it some specific way you must name the image to use it.


Yes, you can use a photo that you have taken. I just uploaded the images to the root directory of my web site, but users will commonly put them in folders, so the web site doesn't get too messy. So, for example, if you created a folder name "header_images" and placed a couple of images there named "page_1_header.jpg" and "page_2_header.jpg", the code for page one might look like this:
Code:

<style type="text/css">
#pageHeader {
background-image: url(<span style="color: red;">header_images/page_1_header.jpg</span>);
background-repeat: repeat; height: 130px; overflow:hidden; }
</style>

For page two the code might look like this:
Code:

<style type="text/css">
#pageHeader {
background-image: url(<span style="color: red;">header_images/page_2_header.jpg</span>);
background-repeat: repeat; height: 130px; overflow:hidden; }
</style>


And, yes, the name is just the name that you give the photo. When you pick a image off of a camera, it may have some odd name like "image_005.jpg". There is nothing wrong with the name but it doesn't give you a good idea of what it is, so you can recognize it later. So you might open it in a image editor, crop out some of the junk, size it properly, and then save it as "garden_vista.jpg". That would then be the name you use.

But, you need to be careful about what you use as an image. Background images are not always a good idea. If there is too much contrast in the image it may be difficult to see an text that is overlaid. Light pastel images would need a dark font color, and dark images would need a very bright font color.

You also have to be a little careful of the size. Most cameras these days are 4 MegaPixels and up. Mine is a 12 MegaPixel. So the pictures it takes can be very big. A sampling of mine are in the range of 3 to 4 MBytes each. On a free site, one image could almost wipe out your available file space. So you need to bring it down in physical size. Here is an example that may clarify this issue.

I have a picture that I took at the Grand Canyon a couple of weeks ago. The image downloaded from my camera was 4000 X 3000 pixels for a total of 3.977 MBytes. That's huge, and not very useful. It would take forever for the image to download to a visitors browser and the width/height ratio isn't very good for a header. So first I first cropped some of the height and then re-sampled it to 1024 x 385 pixels, which then saved as 117 KBytes. That's about 3 percent of it's original size. Then I uploaded it to my test web site (philokvetch.bravehost.com) and replaced the header image on page 2. But, you will probably notice that wasn't all I did. I also increased the header height to 300 pixels and change the color of the text in the header. The code to do all that is listed below.

Code:
<style type="text/css">
#pageHeader {
background: #9aa url(<span style="color: red;">Grand_Canyon_1024x385.jpg</span>);
background-repeat: repeat; height: <span style="color: red;">300px</span>; overflow:hidden; }
<span style="color: red;">#pageHeader h1 {
color: #ffffff; }</span>
</style>


But all is not roses. The image is really 385 pixels high. So the bottom of the image is clipped. I could have increased the height of the header, but that might be over doing it. How big is too big? You will have to be the judge. Plus, the width of the image is 1024 pixels. That looks fine as long as the visitors browser is set to less than about 1200 pixels wide. If the visitors browser is more than that, the image will start to repeat. I could have set the "background-repeat" attribute to "no-repeat" but that would have left some blank space on the right, if the browser was set too wide.

So, in the end, you just have to choose your images very carefully. Because the method I used puts the image in the background, there is no easy way to make it stretch and fit better. I think CSS3 will have better control over background images, but it will be a long time before everyone can benefit from it.

Browser: FIrefox

OS: Solaris, Redhat, Fedora, Suse

Re: headers

I have lost all my photos. I was in folder mgr. and simply renamed them to become better organized and now they dont show up on the site. Can you help me> Please

p.s. I didnt set up the site a friend did so I only know the very basics and I cant get a hold of her right now. Thank you

Re: headers

Barbara this doesn't have anything to do with your problem

You should have started your own topic to cover your images with your site

But for one the images have to match exactly to where you have them.


Meaning if they are in an images folder then you have to have them pointing to the images folder then the file name of the picture.

So you need to take a look at the correct coding for these images you have here on the site.

Because if they are not coded correctly the images will not show up only the red x's


So either fix it yourself or have your friend do it and refrain from messing with it if you have NO CLUE what you are doing.

A common theme someone else starts messing with pages when someone else set them up and then make a disaster.


But as said you need to make sure of the file names and where you have the images and more with the site. Or you are going to have to get a hold of the friend and have them sort it out

Re: headers

Sorry .... for interrupting!!

Just so you know I didn't ask for it to be set up nor did I ask for the burden of keeping it updated. Its a hand me down! And Im doing a favor by trying to keep it going. So sorry I'm not on the correct topic but I though someone might be nice and help me. Guess I was wrong.

I will figure it out on my own. I have up till now. Thanks for saving me some time though, appreciate it!!!!

UPDATE: I figured it out..thanks...guess we arent all DISASTERS