ResolvedCSS Name for Category Page?

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #26812
    kimagine
    Participant

    I apologize in advance if I’m not wording things correctly. 🙂

    I used the custom CSS snippet from another forum post to change the background image for my Blog Post and Product Pages:

    body.single-product .zass_title_holder {
    background-image: url(https://kimagine.com/webstore/wp-content/uploads/2020/10/rose-overlay-BACK-10.jpg);
    background-size: cover;
    background-repeat:none;
    }
    body.single-product .zass_title_holder h1.heading-title, body.single-product .zass_title_holder .breadcrumb, body.single-product .zass_title_holder .breadcrumb a {
    color: #ffffff !important;
    }

    I would like to do the same for the Category pages, but I can’t figure out what they are called, CSS-wise. And by Category pages, I mean the pages that come up when you’ve clicked on one of the categories in the slider, that show all of the products in that selected category.

    Thanks!

    #26862
    Althemist
    Keymaster

    Hello Kimagine,

    Yes, it can be done with CSS, but especially for the product categories it’s not really needed. We have a custom option for this and you can assign image background for each individual category in it’s settings.

    #27027
    kimagine
    Participant

    Thanks for the reply!

    I tried that, and while it did work I noticed that the image area between the torn paper effect was larger than the pages that I used the CSS – even though I used the same image. I like the smaller strip.

    Here’s a single post page that has the smaller image area: https://kimagine.com/webstore/product/enameled-spoon-pendant/

    And here’s what happens when I add that same background in the category section: https://kimagine.com/webstore/product-category/unique-unusual/

    Would you be able to tell me how to do it with CSS?

    #27039
    Althemist
    Keymaster

    Yes, when there is an image background, the title become slightly taller, in order to show more of the image.

    You can do it with CSS, but if it’s the same image on all categories may be the CSS approach to assign the image would be better as you’d only need to do it once.

    CSS to make the title on categories smaller:

    body.tax-product_cat .zass_title_holder.title_has_image .inner {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    #27047
    kimagine
    Participant

    Thanks so much, that did the trick!

    And thank you for making such a lovely theme, I’m very pleased with my website. 🙂

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item
Login and Registration Log in · Register