Hi there,
you helped me with a solution in this post previously: https://wpforo.com/community/qa-layout-how-to-and-troubleshooting/class-id-for-category-or-forum/
#wpforo #wpforo-wrap .wpfl-2:first-of-type .wpforo-category {
background: #d8b3b3 !important;
}
I'd like to achieve the same for classes .wpforo-topic-head and .wpforo-post-head based on under which forum they are posted (extension of the above). However, when I use the same logic, it's not working.
#wpforo #wpforo-wrap .wpfl-2:first-of-type .wpforo-topic-head {
background: red !important;
}
#wpforo #wpforo-wrap .wpfl-2:first-of-type .wpforo-post-head {
background: red !important;
}
Can you advise is possible, please? Thanks
Hi @jadenew, Have you tried editing the specific forum via
1. Forums
2. Click the Pencil Icon to edit the specific forum
3. Categories and Forums
4. then under Forum Permissions, you will see "Additional Options", that's where we can change the Forum Color.
5. Click the Update button.
It might also help to provide a screenshot of what you are needing to change. Good luck and God bless you! 🙂
Hi @crisw.
Thank you for your quick reply. That was a good tip - I was not aware of the option. However, I have tested it and it's not working (screenshots attached).
The thing is I need to apply a gradient as a background, so I guess that can only be achieved with custom CSS, but the above solution is not working. Should there not be relevant classes/divs, I will have to go for a solid color, but need to get it working.
To summarize what I'm after:
I have 2 forums. I want each forum to have a different color so that it's easily distinguishable. I already managed to style the FORUMs, but I also need all TOPICs and POSTs to be styled in the same color as the parent forum. Does it make sense? Example:
Forum 1 - red header
Forum 1 > Topic 1 - red header
Forum 1 > Topic 1 > Post 1 - red header
Forum 2 - blue header
Forum 2 > Topic 1 - blue header
Forum 2 > Topic 1 > Post 1 - blue header
Thank you again.
Please navigate to the Dashboard > Forums > Settings > Styles admin page, put the following CSS code in the "Custom CSS Code" textarea:
#wpforo #wpforo-wrap .wpfl-1 .wpforo-category,#wpforo #wpforo-wrap .wpfl-1 .wpforo-last-topics-list, #wpforo #wpforo-wrap .wpfl-1 .wpforo-post-head {
background-color: #55db53 !important ;
}
#wpforo #wpforo-wrap .wpfl-2 .wpforo-category,#wpforo #wpforo-wrap .wpfl-2 .wpforo-last-post, #wpforo #wpforo-wrap .wpfl-2 .wpforo-post-head {
background-color: #e29683 !important ;
}
#wpforo #wpforo-wrap .wpfl-3 .wpforo-category, #wpforo #wpforo-wrap .wpfl-3 .wpforo-last-topic-title, #wpforo #wpforo-wrap .wpfl-3 .wpforo-post-head{
background-color: #7c3cad !important ;
}
#wpforo #wpforo-wrap .wpfl-4 .wpf-threads .wpf-thread, #wpforo #wpforo-wrap .wpfl-4 .wpforo-category,#wpforo #wpforo-wrap .wpfl-4 .wpforo-post-head {
background-color: #b8cbd3 !important ;
}
Please note the red marked value can be changed.
Please don't forget to delete all caches and press Ctrl+F5 (twice) on the frontend before checking to reload the updated CSS file.
