Different header sizes on different pages

Is it possible to have different header sizes and images on different pages?

I am currently using the ZJ_black template on this site . One thing I like about the template i am using is that is automatically sizes to different screen resolutions.

On the home page I want to have a header that is vertically bigger so that I can place an interesting graphic in it.

On all other pages I want to have a smaller header (so I don't use up so much screen real estate).

Is this possible?

How do I go about it?

Many thanks for your help with this.

As header images are normally "background" images called via the css stylesheet - -

Read the readme in your /css folder for css per page

kobra:

As header images are normally "background" images called via the css stylesheet - -

Read the readme in your /css folder for css per page

Thanks for pointing me to that.

Ok so it would seem that I need to have an index_home.css and that this should be loaded in this folder : /includes/templates/YOUR_TEMPLATE/css

At this stage all I have in this folder are three style sheets called print_stylesheet.css, stylesheet.css and stylesheet_css_buttons.css.

Am I right that I should copy my stylesheet.css and rename it index_home.css and place this renamed copy in the same folder and then edit it with the changes I want for the home page?

No, all you want in index_home.css are the rules that are different from the standard stylesheet, nothing else.

kobra:

As header images are normally "background" images called via the css stylesheet - -

Read the readme in your /css folder for css per page

gjh42:

No, all you want in index_home.css are the rules that are different from the standard stylesheet, nothing else.

Thanks so much guys, I have tested that and it works perfectly.

I really grateful for the help.

I have the artwork that I want to use for the header for index_home and and the other pages.

Currently the artwork consists of two images. One is my logo and the other is a picture of a couple of motorbikes.

I want the logo image on the left hand side and the bike image on the right hand side of the image.

I can easily replace the current logo image with the new image.

1. Can you tell me how I add a second image to the header?
2. I am using fluid page sizing. How do I get the second header image to justify to the right hand side of the header?

If you want your existing red gradient background to remain between the left and right images, you will have to move that to the headerWrapper.
Replace the current #logoWrapper rule in your stylesheet with```
#headerWrapper {
background: url(../images/header_bg.jpg) 23px 23px;
}
#logoWrapper{
background: url(../images/right_bg.jpg) no-repeat top right;
height:106px;
}

gjh42:

If you want your existing red gradient background to remain between the left and right images, you will have to move that to the headerWrapper.
Replace the current #logoWrapper rule in your stylesheet with```
#headerWrapper {
background: url(../images/header_bg.jpg) 23px 23px;
}
#logoWrapper{
background: url(../images/right_bg.jpg) no-repeat top right;
height:106px;
}

When you say "you will have to move 'that' to the header" I assume you are referring to the header_bg.jpg?

Why 23px?

Am I right that 'right_bg.jpg' in your code will be the name I will call the new image?

My apologies if I am asking fairly basic questions I have never worked with style sheets before.

Yes, move header_bg.jpg as shown in my posted code.

23px was a first approximation... "Adjust to taste." The bg image will most likely need to be spaced down from the top of #headerWrapper by the thickness of the top navbar.

'right_bg.jpg' is a placeholder for your image name, since I don't know it.

gjh42:

Yes, move header_bg.jpg as shown in my posted code.

23px was a first approximation... "Adjust to taste." The bg image will most likely need to be spaced down from the top of #headerWrapper by the thickness of the top navbar.

'right_bg.jpg' is a placeholder for your image name, since I don't know it.

Thanks for the very clear explanation. Hopefully I will get the final art work completed and ready today.

Thank you for your generosity of expertise.