Different header sizes on different pages

[Liamv]

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.

[kobra]

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

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

[Liamv]

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?

[gjh42]

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

[Liamv]

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

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

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?

[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;
    }

Adjust to taste.

[Liamv]

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;
    }

Adjust to taste.

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.

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

[Liamv]

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.