Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #1235477

    Hi. I’m working with four different categories, and would like the user to be able to see the difference between them in the masonry grid.
    Is it possible to automatically change the color of the header in the grid based on the category?

    #1235524

    any link to see what is the matter?

    On the anchor of the masonry-item there are classes – f.e. if you show portfolios there is a class f.e. portfolio_entries-webdesign
    the webdesign is the portfolio “category”
    So if you define for each category like this:
    syntax is: portfolio_entries-xyz

    .portfolio_entries-webdesign .av-masonry-entry-title {
      color: red;
    }

    there must be a similar solution for blog posts and categories something like: category-allgemein
    syntax here is: category-xyz

    #1235525

    Not yet I’m afraid. I’ve only just started on testing some things for a new website I’m working on. There’s just 4 posts in 4 categories now, to get the search options working using a plugin.
    There will be about 44 posts in 4 categories of activities when the site goes live. The grid will show them all at first, and the user will be able to check boxes on the categories and tags to narrow things down. We are communicating the different colours for the categories (activities) throughout the website, so it would be logical to see those colours on the posts in the masonry grid as well.
    We have to present the design at the end of this week, so it’s important to know if it’s even possible. Otherwise we don’t want to show it.

    • This reply was modified 4 years, 4 months ago by rhae.
    #1235529

    https://webers-testseite.de/gallery/

    .category-allgemein .av-masonry-entry-title {
      color: red;
    }
    
    .category-grafik .av-masonry-entry-title {
      color: green;
    }
    #1235530

    Aah, that’s exactly what I meant.
    Thanks a lot! I’ll play around with it tomorrow.

    #1235531

    colorize the sort button too:

    
    .category-allgemein .av-masonry-entry-title,
    .allgemein_sort_button span {
      color: red;
    }
    
    .category-grafik .av-masonry-entry-title,
    .grafik_sort_button span {
      color: green;
    }
    #1235660

    Hi rhae,

    Did you get it working with Guenni007’s help or do you need more help?

    Best regards,
    Victoria

    #1235666

    Hi Victoria, thanks you for checking in. I’ll be ok I think. There’s another issue (separate support request) I need to fix first before I can use the solution on the final site though.

    #1235927

    Hi,

    Thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    #1298071

    Hi,

    I have been testing codes for this support for days but I am not able to solve my problem. I need different h1 to h6 color for different categories.
    The last code I used without exit was in my category “second”

    .category-second #top #wrap_all .all_colors h1, #top #wrap_all .all_colors h2, #top #wrap_all .all_colors h3, #top #wrap_all .all_colors h4, #top #wrap_all .all_colors h5, #top #wrap_all .all_colors h6 {
    color: #5f8a35;
    }

    I also have problems with custom my id post number 7420

    .postid-7420 #top #wrap_all .all_colors h1, #top #wrap_all .all_colors h2, #top #wrap_all .all_colors h3, #top #wrap_all .all_colors h4, #top #wrap_all .all_colors h5, #top #wrap_all .all_colors h6 { color: #f29fc4 !important;
    }

    Can you help me?

    Thanks!

    #1298268

    Hi,

    @4m: Did you toggle the Performance > File Compression settings after adding the css code? Please provide links to the category pages so that we can check them properly.

    Best regards,
    Ismael

    #1298514

    Hi,
    CSS file merging and compression is disable.

    Something must be wrong with the code because it doesn´t identify the category and the color that changes is the last one that I have assigned (purple in this case), except the h1 that has never changed.

    /* post with pink category */
    .category-green #top #wrap_all .all_colors h1, #top #wrap_all .all_colors h2, #top #wrap_all .all_colors h3, #top #wrap_all .all_colors h4, #top #wrap_all .all_colors h5, #top #wrap_all .all_colors h6 {
    color: pink;
    }

    /* post with green category */
    .category-green #top #wrap_all .all_colors h1, #top #wrap_all .all_colors h2, #top #wrap_all .all_colors h3, #top #wrap_all .all_colors h4, #top #wrap_all .all_colors h5, #top #wrap_all .all_colors h6 {
    color: green;
    }

    /* post with ID-7420 */
    .postid-7420 #top #wrap_all .all_colors h1, #top #wrap_all .all_colors h2, #top #wrap_all .all_colors h3, #top #wrap_all .all_colors h4, #top #wrap_all .all_colors h5, #top #wrap_all .all_colors h6 {
    color: purple;
    }

    Thanks!

    #1298880

    Hi,

    Is “green” an actual name of a category? This is why it is not working.

    .category-green #top
    

    The #top is the ID of the body element and .category-green is one of its class names, so you have to combine those selectors.

    #top.category-green
    

    Or just use..

    .category-green
    

    .. without the #top selector or ID.

    Best regards,
    Ismael

    #1300159

    Thank you very much but I’m not able to make that work

    • This reply was modified 3 years, 7 months ago by 4m.
    #1300451

    Hi 4m,

    Could you post a link to an example page where you want to implement this please?

    Best regards,
    Rikard

    #1300602

    Hi,
    Mike solved my problem with:
    #top .category-news h1.post-title a {
    color: red;
    }

    Thanks

    • This reply was modified 3 years, 7 months ago by 4m.
    #1300753

    Hi,

    Awesome! Glad to know that it is fixed. Please feel free to open a new thread if you need anything else.

    Have a nice day.

    Best regards,
    Ismael

Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Different header color for different categories’ is closed to new replies.