How to increase the font-size of the content in bbpress forums

In this article we will discuss that how to change the font-size and color for the content in the bbpress forums. I have seen several quizzes about to change the font size and color in the bbpress forums, I’ll try to help you through this article.

Note: The content in this article is based on author’s research. Please back up your files for your bbpress forums before making changes.

Let’s start with the following page types in the bbpress forums:

forum list: consist all forum names in the <ul> element with the css class name ‘bbp-forums‘.
topic list: contains the topics in the <ul> element with the css class name ‘bbp-topics‘.
and the replies: contains the actual question and their responses in the <ul> element with the css class name ‘bbp-replies‘.

by default you can see the these css class in the [Plugins-folder]/[bbpress folder]/template/[default]/css/bbpress.css.

#bbpress-forums ul.bbp-lead-topic,
#bbpress-forums ul.bbp-topics,
#bbpress-forums ul.bbp-forums,
#bbpress-forums ul.bbp-replies,
#bbpress-forums ul.bbp-search-results {
	font-size: 12px;
	overflow: hidden;
	border: 1px solid #eee;
	margin-bottom: 20px;
	clear: both;
}

If you want to change the font-size on all most places including the forum list and topic list. You can edit above classes. After updating the above classes, you can see the changes of the font-size in the reply list in these places:

Change the font-size in the bbpress replies

How can I do

It may be difficult to change the bbpress.css file for the normal users because CSS for bbPress is some complex and hard to understand and you also need to discover the right css file. If you want to change in the bbpress.css, you need to open the bbpress.css file from the [Plugins-folder]/[bbpress folder]/template/[default]/css/bbpress.css. and change the font-size as you want:

#bbpress-forums ul.bbp-lead-topic,
#bbpress-forums ul.bbp-topics,
#bbpress-forums ul.bbp-forums,
#bbpress-forums ul.bbp-replies,
#bbpress-forums ul.bbp-search-results {
	font-size: 14px;
	overflow: hidden;
	border: 1px solid #eee;
	margin-bottom: 20px;
	clear: both;
}

Change font-size for only reply and topic content

If you want to change the font-size only for the content of the topic and reply. You can add a some additional lines in your bbpress.css like as:

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

Change the font-size of the Topic title in topic-list

If you want to change the of the Topic title in topic-list. You can write the following in your bbpress.css.

.bbp-topic-title{
    font-size: 14px;
}

Change the font-size of the Forum title in forum-list

If you want to change the of the forum title in forum-list. You can write the following in your bbpress.css.

..bbp-forum-title{
    font-size: 14px;
}

I hope it will help you. Let me know if you have any problem.

  • Dan Romanchik

    OK, this is great, but what happens when I update the BBPress plugin? The CSS file in the update will overwrite all these changes, no?