Styles are sub-components of wpForo themes. For example, in Classic theme directory (wpforo/wpf-themes/classic/) you can find /styles/ folder. This folder contains PHP file with color variables which generates colors.css dynamic file on root directory of the Classic theme. The dynamic wpforo/wpf-themes/classic/colors.css file is being generated by wpForo on first page reload. All files in /styles/ folder are only for theme developers, you should not edit them. If you want to change forum Style or individual colors you should use Style Settings located in Dashboard > Forums > Settings > Styles admin page.
Style Colors
- Color #1
- Wherever you see white background and white font color
- Color #2
- Main font color
- #wpforo #wpforo-wrap {color:$2;}
- Current forum page title color (forum, topic, member page title) located below breadcrumb.
- #wpforo #wpforo-wrap #wpforo-title{color:$2;}
- Main font color
- Color #3
- Post content font color
- Top Menu bar background color
- #wpforo #wpforo-wrap #wpforo-menu { background-color:$3; }
- Footer top bar background color
- #wpforo #wpforo-wrap #wpforo-stat-header {background-color:$3;}
- Footer bottom “forum powered by info” bar background color
- #wpforo #wpforo-wrap #wpforo-poweredby {background-color:$3;}
- Color #4
- Forum Breadcrumb passive link color
- #wpforo #wpforo-wrap .wpf-breadcrumb a {color:$4;}
- My Profile > Profile page text color
- #wpforo #wpforo-wrap .wpf-profile-section{color:$4;}
- Forum Breadcrumb passive link color
- Color #5
- Topics grey icon colors
- Forum description color
- #wpforo #wpforo-wrap .wpfl-1 .wpforo-forum-description{color:$5;}
- Profile menu bar background color
- #wpforo #wpforo-wrap, .h-footer.wpfbg-2 {background:$5!important;}
- #wpforo #wpforo-wrap .wpf-profile-menu {background:$5!important;}
- Footer statistic text color
- #wpforo #wpforo-wrap #wpforo-stat-body .wpf-stat-item i{color:$5;}
- #wpforo #wpforo-wrap #wpforo-stat-body .wpf-stat-item .wpf-stat-value{color:$5;}
- #wpforo #wpforo-wrap #wpforo-stat-body .wpf-stat-item .wpf-stat-label{color:$5;}
- Color #6
- subForum icon color
- #wpforo #wpforo-wrap .wpforo-subforum i{ color:$6; }
- subForum icon color
- Color #7
- Borders color of almost all grey boxes, panels and sections on forum, topic and post pages.
- Color #8
- Cost content “Quote” and “Code” box background
- #wpforo #wpforo-wrap .wpforo-post .wpf-right .wpforo-post-code{background:$8;}
- #wpforo #wpforo-wrap .wpforo-post .wpf-right blockquote{background:$8;}
- Border color of almost all light grey boxes and panels
- Cost content “Quote” and “Code” box background
- Color #9
- Background color of almost all light grey boxes, panels and sections on forum, topic and post pages.
- Color #10
- SubForum borders color
- Topic/post editor wrapper borders color
- Color #11
- Links’ hover/active font color
- #wpforo #wpforo-wrap a:hover{color:$11;}
- #wpforo #wpforo-wrap a:active {color:$11;}
- .wpfcl-a{color:$11;}
- Topic/post action link hover color (reply, quote, like, sticky, closed, move, delete)
- Links’ hover/active font color
- Color #12
- Forum PRIMARY color
- Buttons background color
- #wpforo #wpforo-wrap .wpf-button{background-color:$12;}
- Active Menu background color
- #wpforo #wpforo-wrap #wpforo-menu .current_page_item {background-color:$12!important;}
- #wpforo #wpforo-wrap .wpforo-active, #wpforo #wpforo-wrap #wpforo-menu li:hover, #wpforo #wpforo-wrap #wpforo-menu .current-menu-item, #wpforo #wpforo-wrap #wpforo-menu .current-menu-ancestor, #wpforo #wpforo-wrap #wpforo-menu .current-menu-parent, #wpforo #wpforo-wrap #wpforo-menu .current_page_item {background-color:$12!important;}
- Category Panel background color
- #wpforo #wpforo-wrap .wpforo-category{background-color:$12!important;}
- Topic List head panel background color
- #wpforo #wpforo-wrap .wpforo-topic-head{background-color:$12!important;}
- Post List head panel background color
- #wpforo #wpforo-wrap .wpforo-post-head{background-color:$12!important;}
- Top Right pop-up message background color
- Color #13
- Q&A layout Topic Votes box background color (on forum and topic list)
- #wpforo #wpforo-wrap .wpforo-last-topic .votes .count.wpfbg-4 {background-color: $13!important;}
- Q&A layout Topic Votes box background color (on forum and topic list)
- Color #14
- Button border color and Button hover background color
- #wpforo #wpforo-wrap .wpf-button{ border: 1px solid $14; }
- #wpforo #wpforo-wrap .wpf-button:hover{ background:$14; }
- Button border color and Button hover background color
- Color #15
- Link color
- #wpforo #wpforo-wrap a { color:$15; }
- #wpforo #wpforo-wrap a:visited { color:$15; }
- Topic/post action link color (reply, quote, like, sticky, closed, move, delete)
- #wpforo #wpforo-wrap .wpf-action{color:$5; }
- Link color
- Color #16
- Forum Breadcrumb active font color
- #wpforo #wpforo-wrap .wpf-breadcrumb a.active{color:$16; }
- Forum Breadcrumb active font color
- Color #17
- Author box in Q&A layout post content and Pre (code) content box background colors
- #wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpforo-post-author-data-content{background:$17;}
- #wpforo #wpforo-wrap pre {background:$17;}
- Author box in Q&A layout post content and Pre (code) content box background colors
- Color #20
- All orange backgrounds and colors
- .wpfcl-5{ color:$20!important; }
- .wpfbg-5{ background-color:$20!important; }
- #wpforo #wpforo-wrap .wpfl-1 .wpforo-post .bottom .bleft a{color:$20;}
- #wpforo #wpforo-wrap .wpfl-2 .wpforo-forum-stat{color:$20;}
- #wpforo #wpforo-wrap .wpfl-2 .wpforo-post .wpf-right .wpforo-post-content-bottom .cbleft a{color:$20;}
- All orange backgrounds and colors
- Color #30
- Color #31
- Color #32
- Color #33
- All green backgrounds and colors (also used in success messages, and in addons)
- .wpfcl-8{ color:$30!important; }
- .wpfbg-8{ background-color:$30!important; }
- All green backgrounds and colors (also used in success messages, and in addons)
- Color #40
- Color #41
- Color #42
- All pink backgrounds and colors (used in addons)
wpForo default Classic theme comes with six set of color styles:
- default (blue)
- red
- green
- orange
- grey
- dark
Info: After wpForo update colors.css file will be removed, but all color settings will still be saved in database. You just need to refresh the forum front-end twice and the colors.css will be automatically created with all old settings and colors. Thus your color customization will not be lost.