Skip to:
Content
Pages
Categories
Search
Top
Bottom

bbPress Styling crib

Codex Home → bbPress Styling crib

This crib lists shows the key areas of the forum display and shows what classes etc. are used to display.

These can be added to your css, or to a custom version of bbpress.css – See Step by step guide to setting up a bbpress forum part 2 for further information.

forum crib

foruma

1. bbp header

#bbpress-forums li.bbp-header {
background: #eaeaea;
}

2. reply header

#bbpress-forums div.bbp-reply-header {
background-color: #f4f4f4;
}

3. Template notice info

div.bbp-template-notice.info {
border: #cee1ef 1px solid;
background-color: #f0f8ff;
}

4. Topic/reply background
Odds and even no. replies have alternating colors

#bbpress-forums div.odd,
#bbpress-forums ul.odd {
background-color: #fbfbfb;
}

#bbpress-forums div.even,
#bbpress-forums ul.even {
background-color: #fff;
}

IF post is sticky or super sticky, then

.bbp-topics-front ul.super-sticky,
.bbp-topics ul.super-sticky,
.bbp-topics ul.sticky,
.bbp-forum-content ul.sticky {
background-color: #ffffe0 !important;
font-size: 1.1em;
}

5. Various texts

These are generally inherited from the your theme.

However you can modify content using

#bbpress-forums .bbp-topic-content p,
#bbpress-forums .bbp-reply-content p {
font-size: 12px;
}

The above code is not in bbpress.css, so if needed add it, or put in your .css see the guide mentioned at the top for further info

6. bbp admin links
span.bbp-admin-links a {
color: #bbb;
font-weight: normal;
font-size: 10px;
text-transform: uppercase;
text-decoration: none;
}

7. Template notice text
div.bbp-template-notice {
border-width: 1px;
border-style: solid;
padding: 0 0.6em;
margin: 5px 0 15px;
border-radius: 3px;
background-color: #ffffe0;
border-color: #e6db55;
color: #000;
clear: both;
}

8. Breadcrumb and link colors
Inherited from your theme

9. Other styling features

9.1 Submit button

Looking for a way to change the submit button in bbpress, bigger, colors…  ? Put into the theme’s child style.css:

#bbpress-forums .submit {
background-color: #a0668d;
color: #FFFFFF;
float: center;
vertical-align: middle;
border-radius: 10px;
height: 35px;
width: 80px;
font-size: 18px;
}

And change to what you want !

 

10. Removing avatars from recent topics widget and freshness

.widget_display_topics .bbp-author-avatar { display: none ! important; }

.bbp-topic-freshness-author  .bbp-author-avatar { display: none ! important; }

11. Forum Header
#content .entry-title {
color: #000000;
font-size: 21px;
font-weight: bold;
line-height: 1.3em;
margin-bottom: 0;
}