Different headers on different pages?

  • Author
    Posts
  • #161728

    decourcier
    Member

    Hi,

    I would like to create a custom front page that doesn’t have a header along the top (I have already done this, although it isn’t published), but then would like different headers on each of the four topic pages (child protection, psychotherapy, research, writing). Is it possible to do that, maybe with some custom CSS?

    Thank you.

    The blog I need help with is scarlettdecourcier.com.

    #161772

    anarieldesign
    Theme Author

    Hi,

    thank you for using Veggie theme.

    Can you please give me more info about it, not sure if I understood it right. Do you mean header image or header part with the menu?
    You can upload a different featured image for each page or add the cover block-full width.

    All the best,
    Ana

    #161775

    decourcier
    Member

    Hi Ana,

    Thanks for the response and sorry for being unclear!

    Within the ‘Themes –> Customize’ menu there is the option to add a site header. This adds a header to every page of the site; by ‘header’ I mean the bit above my name along the top, which shows a picture of plants in this screenshot:
    https://i.postimg.cc/RFthqPK6/Screenshot-2021-03-10-at-10-18-26.png

    What I would like is for no header to appear on the homepage (https://scarlettdecourcier.com) because there are already lots of full-width images on there; but on each of the other pages (Child Protection, Psychotherapy, Research, Writing) I would like custom headers along the top which relate to the topic being discussed.

    I tried this option but it didn’t work, instead it overlayed a black box over my name:
    https://wordpress.com/forums/topic/different-headers-for-different-pages-1/

    Thanks,
    Scar

    #161838

    anarieldesign
    Theme Author

    Hi Scar,

    unfortunately, the only way to do this is like it’s written in the forum topic u sent to me. Custom Headers don’t have this option, you can use one on all pages or different images using the randomized option.

    To have a particular image on a particular page you’ll need to use this method from the article u sent. Like this:

    .page-id-13723 .header-image {
        background: url("https://anarieldesignsandbox.files.wordpress.com/2020/03/95885-mountaindawn.jpg") no-repeat scroll center top;
        height: 400px;
        max-height: 400px;
    }

    change it with your own image link.

    If you can’t manage to make it, please send me the image links you want to have. Please write which one u want to have on which page and I can help you with the Custom CSS. And please activate the header image before, as I need this to be able to write a specific Custom CSS for you.

    Hope this helps.

    All the best,
    Ana

    #161933

    decourcier
    Member

    Hi Ana,

    Thanks – I’ve tried with the code you’ve sent, but it just adds a second header below the top one (see here for example):
    https://i.postimg.cc/fLB9PLPx/Screenshot-2021-03-16-at-10-41-40.png

    If I disable the header in general, then neither one of them shows up.

    Ideally I’d like no header on the home page, but custom headers on the four subject pages.

    The custom header URLs are:

    Page 13729: https://scarlettdecourcier.files.wordpress.com/2021/03/cropped-pexels-photo-193349.jpeg

    Page 13723: https://scarlettdecourcier.files.wordpress.com/2020/08/cropped-f311b-screenshot-2019-01-18-at-10.08.34-1.png

    Page 1960: https://scarlettdecourcier.files.wordpress.com/2021/03/cropped-img_7864.jpg

    Page 13733: https://scarlettdecourcier.files.wordpress.com/2021/03/cropped-38984589-5ef0-4565-a977-8107e0bd9e41_1_105_c-1-1.jpeg

    Thank you for your help!
    Scar

    #162070

    anarieldesign
    Theme Author

    Hi Scar,

    can you please make one page live with the header image, so I can check it out and help you with it? It’s easier if I can see it and check the code and what you’ll need to add in the Custom CSS.

    Thanks,
    Ana

    #162105

    decourcier
    Member

    Hi Ana,

    Sure, I’ve set the header live.

    Thanks :)

    #162144

    anarieldesign
    Theme Author

    Hi Scar,

    you’ll need to add this:

    .home img.custom-header {
        display: none;
    }
    .page-id-13729 .header-image {
        background: url(https://scarlettdecourcier.files.wordpress.com/2021/03/cropped-pexels-photo-193349.jpeg) no-repeat scroll center top;
        height: 300px;
        max-height: 300px;
    }
    .page-id-13729 .header-image img {
        display: none;
    }
    
    .page-id-13723 .header-image {
        background: url(https://scarlettdecourcier.files.wordpress.com/2020/08/cropped-f311b-screenshot-2019-01-18-at-10.08.34-1.png) no-repeat scroll center top;
        height: 300px;
        max-height: 300px;
    }
    .page-id-13723 .header-image img {
        display: none;
    }
    
    .page-id-1960 .header-image {
        background: url(https://scarlettdecourcier.files.wordpress.com/2021/03/cropped-img_7864.jpg) no-repeat scroll center top;
        height: 300px;
        max-height: 300px;
    }
    .page-id-1960 .header-image img {
        display: none;
    }
    
    .page-id-13733 .header-image {
        background: url(https://scarlettdecourcier.files.wordpress.com/2021/03/cropped-38984589-5ef0-4565-a977-8107e0bd9e41_1_105_c-1-1.jpeg) no-repeat scroll center top;
        height: 300px;
        max-height: 300px;
    }
    .page-id-13733 .header-image img {
        display: none;
    }

    Hope this helps.

    All the best,
    Ana

    #162147

    decourcier
    Member

    Thanks Ana, I think we’re nearly there! That almost works (I have set it live on the site so you can see it) but if you look at the Contact page vs. e.g. the ‘Writing’ page you will see that the header image is larger / different. Is it possible to make the header on the Child Protection, Psychotherapy, Research and Writing pages the same size / dimensions as it currently is on the Contact page?

    Sorry for all the questions and thank you for your help!

    #162172

    anarieldesign
    Theme Author

    Hi,

    you can play and reduce the height and max-height in your code. For example you can put 200px for both instead of 300px.

    Hope this helps.

    All the best,
    Ana

    #162173

    decourcier
    Member

    Thanks – I know, I tried that, but the problem is that it doesn’t look like the same header on both (see for example the ‘Writing’ and ‘Contact’ pages now – the headers are the same height but they’re different in style). It looks like something to do with dimensions but I can’t see any dimension stuff in the CSS.

    Is there any way to change that? If not then I will just delete the headers as I think that’s probably easier!

    #162254

    anarieldesign
    Theme Author

    Hi,

    to have them the same size you’ll need to add:

    .page-id-13733 .header-image {
        background: url(https://scarlettdecourcier.files.wordpress.com/2021/03/cropped-38984589-5ef0-4565-a977-8107e0bd9e41_1_105_c-1-1.jpeg) no-repeat scroll center top;
        height: 300px;
        max-height: 300px;
    }

    All the best,
    Ana

    #162294

    decourcier
    Member

    I think that’s already in there! And it’s the dimensions that are different as well as the size:
    https://i.postimg.cc/sfqSsyTh/Screenshot-2021-03-30-at-12-05-44.png

    But I will close this now because I don’t think it’s resolvable and I don’t want to waste any more of your time.

    #162318

    anarieldesign
    Theme Author

    You can upload images that are all the same sizes for the header and you’ll need to adapt a bit if needed, height for the code I sent you. Header images are not meant to be used the way you want them but with the custom code, I sent it’s possible to make it happen. You can make the images all the same width and height and adapt the custom CSS I sent if needed.

    All the best,
    Ana

    #162320

    decourcier
    Member

    Thanks, I’ll play around with it :)

    #162384

    anarieldesign
    Theme Author

    You are welcome :)

The topic ‘Different headers on different pages?’ is closed to new replies.