Support Center Visit Demo License manager Buy @ envato

Custom header image for categories

sajcoppesajcoppe
in Other
Hi BeTheme,

I have a question regarding the header image. I've been trying all weekend but I can't figure out how to do it. I hope you can help. The website I'm making is visible on http://185.104.29.62/~labassistent/.

When you check the category 'parts & supplies' (http://185.104.29.62/~labassistent/product-category/parts-and-supplies/), it shows a category. This page shows the standard header image that I set in the options. I would like to 'overwrite' this per category so that I can set a different header image per category.

I have seen in the code that every page has a different body class, so I should be able to use this to change the image via css? Do you have a clue what I have to put in my custom css to get this to work?

Thanks in advance,

Greetings, Sander

Comments

  • BryanBryan
    Hi,
    Use this css 
    .term-parts-and-supplies body:not(.template-slider) #Header_wrapper {
        background-image: url(http://185.104.29.62/~labassistent/wp-content/uploads/2016/10/Untitled-2.png); }
    Change the image url,
    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • ominoomino
    Hello,

    I have a similar issue to this one and have tried using the custom css provided (modified for my own site). However, the header image refuses to update.

    My Body Tag:

    <body class="archive category category-late-night-miami category-61 logged-in admin-bar with_aside aside_right color-custom style-simple layout-full-width button-stroke if-zoom header-transparent header-fw minimalist-header-no sticky-header sticky-dark ab-hide subheader-both-center menuo-arrows menuo-no-borders menuo-right footer-copy-center mobile-tb-left mobile-mini-mr-ll wpb-js-composer js-comp-ver-5.0.1 vc_responsive customize-support nice-scroll" cz-shortcut-listen="true">

    Custom CSS Tags I tried:
    .category-late-night-miami body:not(.template-slider) #Header_wrapper {
        background-image: url(/wp-content/uploads/2017/07/20170725_dm_default_header.png) !important; }

    .category-61 body:not(.template-slider) #Header_wrapper {
        background-image: url(/wp-content/uploads/2017/07/20170725_dm_default_header.png) !important; }

    When I remove the category class selector(s), the following css does work. However this makes an unwanted site-wide header change:

    body:not(.template-slider) #Header_wrapper {
        background-image: url(/wp-content/uploads/2017/07/20170725_dm_default_header.png) !important; }

    Please advise.
  • BryanBryan
    Hi,
    can you try this css first? 
    body.category-late-night-miami #Header_wrapper {
        background-image: url(/wp-content/uploads/2017/07/20170725_dm_default_header.png) !important; 
    }
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • ominoomino
    Yes, thank you, that worked!
Sign In or Register to comment.