New to the community? Start here

How to customize (fit) my website header image for each page?

Hello,

I’m using “Hemingway” WordPress theme on my site ( http://www.positifstyle.com ). This them only allows me to put one image (Header image). So when I change form page to page I alway have this same large image on the top… kind of boring (-_-)

My question is, how can I customize this image (header) for each page? I would like to have a fashion image (header) in fashion page, for exemple… or a Sport image in the sport page… and so one.

Thanks again for your precious help. Best regards,

Mon, 28 Apr 2014 16:15:13
  • Patrick Cohen
    • Technical Docs Wrangler

    Hi there @Positif Style

    I hope you had a great weekend!

    Thankfully, the designer of that theme did a good job on the header, so what you want is easy enough to accomplish via some simple CSS.

    The image is set as a background of the header container, so you can set a different image for each different content type

    WordPress adds a body class to everything that displays in the browser, according to the type of content that is being displayed. So pages have a page class, posts have a single-post class, category & tag archives have a body class corresponding to the category or tag like so: category-name, tag-name, etc.

    Currently, your header image is this:

    .header-cover .header {background-image: url("http://positifstyle.com/wp-content/uploads/2014/03/cropped-cropped-Positif-Style-Couple.jpg"); bottom: 0px;}

    As it looks like you are not using a child-theme, you can add the CSS you need for this project to a very handy plugin like this one:

    http://wordpress.org/plugins/simple-custom-css/

    So, for example, to have a different image oon the fashion category archive display, add this to the Custom CSS:

    .category-fashion .header-cover .header {background-image: url("http://positifstyle.com/wp-content/uploads/2014/03/cropped-cropped-Positif-Style-Couple.jpg"); bottom: 0px;}

    I hope this helps! And thanks for being a member :slight_smile:

  • Positif Style
    • Site Builder, Child of Zeus

    Thank you very much for your help.

    I got the custom CSS plugin.

    About the CSS you gave me, I tried it but it didn’t work. I think I need to understand it better. So let me make a exemple based on a real page I have on my site ok, then correct me if I’m wrong:

    I have a page called Attitude. To change its header I just have to change:

    .category-THIS.header-cover .header {background-image: url(“AND THIS”:wink:; bottom: 0px;}

    so it can look like this? :

    .category-attitude .header-cover .header {background-image: url(“http://positifstyle.com/wp-content/uploads/2014/03/cropped-cropped-Positif-good-attitude-shosen-image.jpg&#8221:wink:; bottom: 0px;}

    is that correct?

    I’m not sure to fully understand which parts do I have to change in the CSS code. Once I understand the principe, I will be able to follow the same pattern in all other pages…

    Thank you again for your time and your help.

  • PC
    • WPMU DEV Initiate

    Hey there,

    Thanks for posting back.

    What Patrick suggested is a general CSS structure. You still need to find the right element to apply the CSS on.

    If you can enable the right click on your site (its currently disabled), I can help you find the right element and tell you the pattern so that you can do that for your other pages.

    Please advise once you have done that.

    Cheers, PC