How to improve the look of BBPress with CSS

(Update: We’ve incorporated the CSS into Socrates now and also have a BBPress sidebar option. We’ll leave this post up, but it’s now outdated)

We use BBPress for our Customer Support Forum.

Here’s a YouTube Demo.

If you want to add BBPress to your Socrates install, add this code to your child theme or custom CSS box to improve the styling.

/*----------------------------
## BBPress
---------------------------------------*/
#bbpress-forums .bbp-forums-list li {font-size: 14px;}
#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: 16px;}
#bbpress-forums div.bbp-search-form {padding-bottom: 20px;}
#bbpress-forums p.bbp-topic-meta img.avatar {float: none;margin-bottom: 0;vertical-align: middle;border: 0px solid #ddd;display: inline-block;}
#bbpress-forums .subscription-toggle {float:right;}
#bbpress-forums .bbp-forums-list li {display: block !important;}
#bbpress-forums .bbp-forum-info .bbp-forum-content, #bbpress-forums p.bbp-topic-meta {font-size: 13px;}
#bbpress-forums .bbp-breadcrumb, .bbp-topic-tags {font-size: 18px;}
#bbpress-forums .input {color:#333;}
.bbp-submit-wrapper .button {color:#fff;}
#bbpress-forums div.bbp-the-content-wrapper textarea.bbp-the-content {font-family: inherit;font-weight: inherit;font-size: 16px;}

Also to make a full width page without sidebar, make a new file, copy this code into it, then name it bbpress.php and upload it to the Socrates theme directory. You might need to reupload again if you’re not using a child theme.

(Note: I added this bbpress.php template to the theme files. and will be adding a sidebar option to our customizer in a future release)

<?php
get_header(); ?>

	<div id="content">
		
		<?php

			// loop posts
			while ( have_posts() ) : the_post();

				// output from template
				get_template_part( 'template-parts/content', 'page' );

				// comments
				if ( comments_open() || get_comments_number() ) { comments_template(); }

			endwhile;
			
		?>

	</div><!-- #content -->

<?php get_footer();