Clear all

wpForo 1.x.x [Closed] Class/ID by forum

5 Posts
3 Users
0 Reactions
Posts: 8
Topic starter
Active Member
Joined: 4 years ago

Hi there, 


you helped me with a solution in this post previously:


#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

4 Replies
Posts: 281
Reputable Member
Joined: 6 years ago

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! 🙂 


3 Replies
Joined: 4 years ago

Active Member
Posts: 8

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. 


Joined: 4 years ago

Active Member
Posts: 8

Adding screenshots for illustration. 

Joined: 5 years ago

Posts: 1868


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.