wpForo v1 Documentation

  1. Home
  2. Docs
  3. wpForo v1 Documentation
  4. Forum Themes
  5. Theme Styles

Theme Styles

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;}
  • 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;}
  • 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; }
  • 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
  • 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)
  • 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;}
  • 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; }
  • 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; }
  • Color #16
    • Forum Breadcrumb active font color
      • #wpforo #wpforo-wrap .wpf-breadcrumb a.active{color:$16; }
  • 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;}
  • 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;}
  • 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; }
  • 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.

Was this article helpful to you? Yes 32 No 4