custom header for each page in a website

  • Unknown's avatar
    isenhourjudy · Member ·

    I would like to customize each header for each page of the static content of my website. I don’t want them to be randomized. Is that possible?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, have you thought about setting featured images for each post instead of using a Custom Header? The featured images will show larger than the header image.

    We can do a header image for each page. It will require a specific CSS rule for each and every page on your site. We would use the unique page id CSS class set in the opening body selector for each page and then add the image into the header-image div and then hide the normal header image with additional CSS.

    Let me know if setting a featured image for each page is something that will work for you.

    This would be the basic CSS required to add a different header image on your about page. The images will have to be sized to exactly 1600px wide x 320px tall so that they are the same size as the existing header image. This is for your about page. 

    .page-id-413 .header-image img {
    visibility: hidden;
}
.page-id-413 .header-img {
    background: url('URL_OF_IMAGE') no-repeat scroll 0 0 /contain transparent;
}

    You can use the above as a guide when doing the CSS rules for the other pages. Upload your image to the media library, get the URL of that image and then replace URL_OF_IMAGE between the quote marks with the URL of your uploaded image.

    You find the unique CSS body class in the opening body HTML tag on each page. The opening body tag would look similar to this one for your about page.
    <body class="page page-id-413...
    I used the web inspector built into my browser to find the relevant CSS. If you are not familiar with the web inspector in your browser, take a look at our support page on How to Find Your Theme’s CSS where you will find some brief screencasts to get you started with it. I find it an invaluable tool when working with CSS.

  • Unknown's avatar
    isenhourjudy · Member ·

    Hi, the sacred path.

    Your advice is a tremendous help to me. I will try putting a dedicated custom header on my About page to see if I can do it. Can I ask you to look at it after I have finished?

    Many thanks,

    Judy

  • Unknown's avatar
    thesacredpath · Member ·

    Certainly Judy, and if you have problems, just let us know.

  • Unknown's avatar
    isenhourjudy · Member ·

    Well, I have decided to use featured images, rather than custom headers. You suggested that. I changed my mind because I couldn’t even find the page IDs in the html.

    Thanks for your help.

    j

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

    Featured images will be far easier in the long run and you won’t have to keep creating new CSS rules each time you create a new page, or edit a rule if you wish to change the image later on.

  • The topic ‘custom header for each page in a website’ is closed to new replies.