-
AuthorPosts
-
August 5, 2020 at 5:41 pm #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?August 5, 2020 at 10:12 pm #1235524any 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-xyzAugust 5, 2020 at 10:23 pm #1235525Not 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, 3 months ago by rhae.
August 5, 2020 at 10:33 pm #1235529https://webers-testseite.de/gallery/
.category-allgemein .av-masonry-entry-title { color: red; } .category-grafik .av-masonry-entry-title { color: green; }
August 5, 2020 at 10:34 pm #1235530Aah, that’s exactly what I meant.
Thanks a lot! I’ll play around with it tomorrow.August 5, 2020 at 10:36 pm #1235531colorize 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; }
August 6, 2020 at 11:58 am #1235660Hi rhae,
Did you get it working with Guenni007’s help or do you need more help?
Best regards,
VictoriaAugust 6, 2020 at 12:09 pm #1235666Hi 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.
August 7, 2020 at 7:47 am #1235927Hi,
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,
RikardMay 3, 2021 at 5:22 pm #1298071Hi,
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!
May 4, 2021 at 1:19 pm #1298268Hi,
@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,
IsmaelMay 5, 2021 at 12:18 pm #1298514Hi,
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!
May 7, 2021 at 9:11 am #1298880Hi,
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,
IsmaelMay 13, 2021 at 2:16 pm #1300159Thank you very much but I’m not able to make that work
- This reply was modified 3 years, 6 months ago by 4m.
May 15, 2021 at 4:38 am #1300451Hi 4m,
Could you post a link to an example page where you want to implement this please?
Best regards,
RikardMay 16, 2021 at 11:10 pm #1300602Hi,
Mike solved my problem with:
#top .category-news h1.post-title a {
color: red;
}Thanks
- This reply was modified 3 years, 6 months ago by 4m.
May 17, 2021 at 2:29 pm #1300753 -
AuthorPosts
- The topic ‘Different header color for different categories’ is closed to new replies.