Style bb press forum

Hello support,

I would like to style my bbpress forum, but I am not sure which file to add the css to.

Do I add it to the functions.php of the child theme?

Also, I looked for a bbpress.css file but couldn’t find one.

Help would be appreciated!

Hi there,

Because of the cascading nature of CSS, you do not need to add separate CSS file to the site to style the bbPress. You can simply add your CSS code which will override the default bbPress CSS code inside your Child Theme’s style.css file or even you can simply use the X > Launch > Options > CS to add the CSS needed.

Whenever you want to style the bbPress pages use the Chrome Browser Developer Toolbar to find out a unique class attached to the body tag of that page which will make your CSS selector more presise.

If you have a specific case which you want to change we can suggest you the code so you will understand how you can add the CSS code to override the bbPress default styles.

Thank you.

Thanks for the help Christopher!

I have looked at the bbpress styling crib and still cannot find out how to change a few things around and I could use some help!

My forum: http://www.soundshockaudio.com/forums/

Here are a few things I would like changed around:

  1. I would like to change the font size of the “Forums”
  2. I would like to change the color and size of the “posts” and “topics” counters
  3. I would like to change the size and font weight of the text that displays under “Freshness”
  4. I would like to remove the box drop shadow from the search bar
  5. I would like to remove the box drop shadow from the forums

Any help would be appreciated!

Hello @dstro003,

Thanks for updating thread. :slight_smile:

You can add following CSS under Pro > Launch > Theme Options > CSS to make necessary changes in bbPress forum:

.bbpress .entry-title {
    font-size: 300%;
}

.bbpress span.x-bbp-count {
    font-size: 150%;
    color: #000;
    background-color: #fff;
}

.bbpress li.bbp-forum-freshness {
    font-size: 80%;
    font-weight: bold;
}

.bbpress form#bbp-search-form {
    box-shadow: none;
}

.bbpress li.bbp-forum {
    box-shadow: none;
}

Thanks.

Thank you for the code Prasant! I appreciate it.

I have a couple more style changes that I could use some help with also if you didn’t mind!

  1. .bbpress li.bbp-forum-freshness {
    font-size: 63%;

    When I use the code: to change the size of the Freshness text, it changes the size of the freshness header
    as well.
    How would I just change the size of the text under the Freshness header?

  2. I would like to remove just the left and right borders of the entire container.

  3. I would like to change the color of the bakcground of Producers Vault and alternate colors like in this photo

  4. I would like to change the size of this text

  5. I would like to add a colored dot to the front of each of these forums like the one in this photo.

Thanks again for all of your guys help!

Hi there,

Please add the CSS code below to X > Launch > Options > CSS:

.bbpress .bbp-body li.bbp-forum-freshness,
.bbpress .bbp-body li.bbp-forum-freshness p {
    font-size: 7px;
}

.bbp-body > ul:nth-child(2n) {
    background-color: #EEE !important;
}

.bbp-body .bbp-forum-content {
    font-size: 10px;
}

Feel free to change the values of the code above to suite your needs.

I strongly suggest that you learn about the Google Developer Toolbar and starting to guess correct CSS selectors using that tool:


The item 4 will need intensive customization which is indeed outside of our support scope. I am sure you will understand.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

Great!

Thank you for all help Christopher!

I will open up new threads for further support!

Thanks

1 Like

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.