Jump to content

How to use different headers according to category


Janic

Recommended Posts

Well it depends on your theme but inspect code on category page. You could see something like

<body id="category" class="lang-en country-rs currency-gbp layout-left-column page-category tax-display-enabled category-id-3 category-clothes category-id-parent-2 category-depth-level-2">

 

so you can use in CSS  body.category-id-3 or just   .category-clothes , depending on languages.

 

PrestaShop 1.7 have lot more options so you can have different templates for each category 

https://devdocs.prestashop.com/1.7/themes/reference/templates/templates-layouts/#specific-templates

  • Like 1
Link to comment
Share on other sites

19 minutes ago, razaro said:

Well it depends on your theme but inspect code on category page. You could see something like


<body id="category" class="lang-en country-rs currency-gbp layout-left-column page-category tax-display-enabled category-id-3 category-clothes category-id-parent-2 category-depth-level-2">

 

so you can use in CSS  body.category-id-3 or just   .category-clothes , depending on languages.

 

PrestaShop 1.7 have lot more options so you can have different templates for each category 

https://devdocs.prestashop.com/1.7/themes/reference/templates/templates-layouts/#specific-templates

7

Do i add this to the custom.css file?

 

Link to comment
Share on other sites

how do i start to add this in de custom css.

de category id is 46.

This is my custom css. 

#header {
    background: url(/img/home.png)center no-repeat;
    background-size: auto;
    color: #384a89;
}
#header .header-top {
    padding-bottom: 20.0rem;
    background: url(/img/wave.png)repeat-x bottom;
}
#header a {
    color: #ffffff;
}
#header .header-nav {
    border-bottom: 2px solid #f1f1f1;
    max-height: 100px;
    margin-bottom: 30px;
    background-color: #384a89;
}

body.category-id-46 {
    header {
    background: url(/img/cursus.jpg)center no-repeat;
    background-size: auto;
    color: #384a89;
    }


    

Thanks for al the help.

Link to comment
Share on other sites

3 minutes ago, razaro said:

Try with


body.category-id-46 {
    header {
    background: url(/img/cursus.jpg) center no-repeat;
    background-size: auto;
    color: #384a89;
}

 

Make sure it is at end of file, so after first #header so it can override styles.

I tried this and i get a unknow property name error in the google dev tools.

Link to comment
Share on other sites

  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...