wpForo v2 Documentation

  2. Home
  4. wpForo v2 Documentation
  6. Forum Themes
  8. Style Customization

Style Customization

Styles are subcomponents of wpForo themes. For example, in 2022 theme directory (wpforo/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/themes/2022/matrix.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 five color options located in wpForo > Settings > Colors & Styles admin page.

Style Colors

  • Color #1
    • Wherever you see white background and white font color
  • Custom CSS
    • Main font color
      • #wpforo #wpforo-wrap {color:#333333;}
    • Current forum page title color (forum, topic, member page title) located below breadcrumb.
      • #wpforo #wpforo-wrap #wpforo-title{color:#333333;}
  • Color #3
    • Post content font color
    • Top Menu bar background color
      • #wpforo #wpforo-wrap #wpforo-menu { background-color:#555555; }
    • Footer top bar background color
      • #wpforo #wpforo-wrap #wpforo-stat-header {background-color:#555555;}
    • Footer bottom “forum powered by info” bar background color
      • #wpforo #wpforo-wrap #wpforo-poweredby {background-color:#555555;}
  • Custom CSS
    • Forum Breadcrumb passive link color
      • #wpforo #wpforo-wrap .wpf-breadcrumb a {color:#666666;}
    • My Profile > Profile page text color
      • #wpforo #wpforo-wrap .wpf-profile-section{color:#666666;}
  • Custom CSS
    • Topics grey icon colors
    • Forum description color
      • #wpforo #wpforo-wrap .wpfl-1 .wpforo-forum-description{color:#777777;}
    • Profile menu bar background color
      • #wpforo #wpforo-wrap, .h-footer.wpfbg-2 {background:#777777!important;}
      • #wpforo #wpforo-wrap .wpf-profile-menu {background:#777777!important;}
    • Footer statistic text color
      • #wpforo #wpforo-wrap #wpforo-stat-body .wpf-stat-item i{color:#777777;}
      • #wpforo #wpforo-wrap #wpforo-stat-body .wpf-stat-item .wpf-stat-value{color:#777777;}
      • #wpforo #wpforo-wrap #wpforo-stat-body .wpf-stat-item .wpf-stat-label{color:#777777;}
  • Custom CSS
    • subForum icon color
      • #wpforo #wpforo-wrap .wpforo-subforum i{ color:#999999; }
  • Custom CSS
    • Cost content “Quote” and “Code” box background
      • #wpforo #wpforo-wrap .wpforo-post .wpf-right .wpforo-post-code{background:#e6e6e6;}
      • #wpforo #wpforo-wrap .wpforo-post .wpf-right blockquote{background:#e6e6e6;}
    • Border color of almost all light gray boxes and panels
  • Color #11
    • Links’ hover/active font color
      • #wpforo #wpforo-wrap a:hover{color:#659fbe;}
      • #wpforo #wpforo-wrap a:active {color:#659fbe;}
      • .wpfcl-a{color:$11;}
    • Topic/post action link hover color (reply, quote, like, sticky, closed, move, delete)
  • 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
  • Custom CSS
    • 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: #72ccfc!important;}
  • 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; }
  • Custom CSS
    • Link color
      • #wpforo #wpforo-wrap a { color:#3f7796; }
      • #wpforo #wpforo-wrap a:visited { color:#3f7796; }
    • Topic/post action link color (reply, quote, like, sticky, closed, move, delete)
      • #wpforo #wpforo-wrap .wpf-action{color:#3f7796; }
  • Custom CSS
    • Forum Breadcrumb active font color
      • #wpforo #wpforo-wrap .wpf-breadcrumb a.active{color:#4a8eb3; }
  • Custom CSS
    • 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:#dff4ff;}
      • #wpforo #wpforo-wrap pre {background:#dff4ff;}
  • Custom CSS
    • All orange backgrounds and colors
      • .wpfcl-5{ color:$20!important; }
      • .wpfbg-5{ background-color:#ff812d!important; }
      • #wpforo #wpforo-wrap .wpfl-1 .wpforo-post .bottom .bleft a{color:#ff812d;}
      • #wpforo #wpforo-wrap .wpfl-2 .wpforo-forum-stat{color:#ff812d;}
      • #wpforo #wpforo-wrap .wpfl-2 .wpforo-post .wpf-right .wpforo-post-content-bottom .cbleft a{color:#ff812d;}
  • Custom CSS
    • All green backgrounds and colors (also used in success messages, and in addons)
      • .wpfcl-8{ color:#4dca5c!important; }
      • .wpfbg-8{ background-color:#4dca5c!important; }