Notifications
Clear all

Limited Support

Our team is currently on holiday, so support will be limited during this period. Response times may be slower than usual, and some inquiries may be delayed.
We appreciate your patience and understanding, and we’ll resume our usual support by the end of August.

 

wpForo 1.x.x [Solved] theme color editing

10 Posts
3 Users
0 Reactions
1,209 Views
techhnyne
Posts: 10
Topic starter
(@techhnyne)
Active Member
Joined: 5 years ago

is there an image discription that shows what color #2 chocolates to what area of the forum?  it would be much quicker and easier to style this with that  thanks

 

also I am looking to have the color 12 area and the color 3 area the same color except i wanna make the active tab a different color.  so basically the forum menu and the forum category are the same colors and only the tab is changed color if you are active on it

9 Replies
techhnyne
Posts: 10
Topic starter
(@techhnyne)
Active Member
Joined: 5 years ago

here is an example of things im looking to do

6 Replies
Robert
Admin
(@robert)
Joined: 9 years ago

Support Team
Posts: 10616

@techhnyne,

I'm sorry but i didn't follow you, what exactly you want to change? 

For a specific changes, I recommend use CSS codes provided with each color description in this: https://wpforo.com/docs/root/forum-themes/theme-styles/

techhnyne
(@techhnyne)
Joined: 5 years ago

Active Member
Posts: 10

@robertbasically im looking to edit the class name son the elements so i can switch the colors around with out them changing things i dont want.  for instance 12  I only want 12 to effect

 #wpforo #wpforo-wrap .wpf-button{background-color:$12;}

and nothing else
where can i go to edit those  colors.css?   go I just copy the

 #wpforo #wpforo-wrap #wpforo-menu .current_page_item {background-color:$12!important;}

 

to a child css sheet and change  it to

#wpforo #wpforo-wrap #wpforo-menu .current_page_item {background-color:$3!important;}

since i want that to have the colors of 3?

I think I maybe figured it out while reading

 

Robert
Admin
(@robert)
Joined: 9 years ago

Support Team
Posts: 10616

@techhnyne,

All custom CSS should be added in Dashboard  >Forums > Settings > Styles > Custom CSS code textarea. You should save, delete all caches, then navigate to forum front-end and press Ctrl+F5 to reset browser cache.

 

$12 and $3 are color variables, you should replace those to your preferred color, the colors must be hexadecan colors like #000000 (black), example:

 #wpforo #wpforo-wrap .wpf-button{background-color:#000000;}
#wpforo #wpforo-wrap .wpf-button{background-color:#000000 !important;}

you can find those in the same admin page by clicking on the color pickers or select it using online tools: https://htmlcolorcodes.com/

 

techhnyne
(@techhnyne)
Joined: 5 years ago

Active Member
Posts: 10

@robert

 

thank you very much!

techhnyne
(@techhnyne)
Joined: 5 years ago

Active Member
Posts: 10

@robert

I cant seem to find the class to color the file attatch button im using

#wpforo #wpforo-wrap .wpforo-post .wpforo-attached-file {color:#81D742!important;
Alvina
Moderator
(@alvina)
Joined: 6 years ago

Member
Posts: 1861

@techhnyne,

Please try to use the following code, just change color attribute to background:

#wpforo #wpforo-wrap .wpforo-post .wpforo-attached-file {
background:#81D742!important;
}

See the screenshot below: 

https://www.screencast.com/t/dzSaY0Cb

techhnyne
Posts: 10
Topic starter
(@techhnyne)
Active Member
Joined: 5 years ago

also i cant seem to find the class for the topic border thats in green and the reply button and the red border
https://imgur.com/a/k4WgW0l

1 Reply
Alvina
Moderator
(@alvina)
Joined: 6 years ago

Member
Posts: 1861

@techhnyne,

Please use the following CSS code to change the post create border color:

#wpforo #wpforo-wrap #wpf-post-create{
border: 1px solid #6f00aa;
}

Use the following one to change the reply button border color:

#wpforo #wpforo-wrap .wpf-post-create input[type=submit] {
border: 1px solid #6f00aa;
}

Please note the red marked value can be changed.

In any case, don't forget to delete all caches and press CTRL+F5(twice) on the frontend before checking