[Piani]

After looking into child theme and options to make a complete theme for BBPress 2.5 I want to share this. (Unfortunatly the web is flooded with usless 1.0 tips)

If you are not that into setting up a complete BBPpress child theme and hacking CSS, this is one simple way of doing a easy change and customisation of BBPress if u want some personalized look and you already have a child-theme style.css but your main-theme style is messing with BBPress looks.

Add this snippet into your normal child-theme style.css and change the colors and font size as you like.

/* BBPress font fix */

#bbpress-forums li.bbp-header,
#bbpress-forums li.bbp-footer {
background: #D6E0FF;
}

#bbpress-forums div.bbp-forum-title h3,
#bbpress-forums div.bbp-topic-title h3,
#bbpress-forums div.bbp-reply-title h3 ,
#bbpress-forums a.bbp-forum-title,
#bbpress-forums a.bbp-topic-permalink {
	font-size: 16px;
	color: #0066FF;
}

#bbpress-forums a.bbp-author-name {
	font-size: 12px;
	color: 	#75A3FF;
}

Thats all. All other style is already looking nice I think. I use this blue look in my Techism child-theme and it looks great. Running BBPress 2.5.3.

[shpitzyl]

The script in the link is working, you probably haven’t closed it with php tags.

Put this in bp-custom.php in the plugins folders

<?php
function bp_exclude_profile_tabs() {
global $bp;

$bp->bp_nav['forums'] = false;
}
add_action( 'bp_setup_nav', 'bp_exclude_profile_tabs', 999 );
?>

If you prefer to do it with css, you need to copy bbpress.css from:
plugins/bbpress/templates/default/css

And put it in:
themes/[your child theme folder]/css

(if you don’t have a css folder in your child theme, create one)
Then put the css rule mentioned above somewhere in the file.

[metalmick]

Using firebug i was able to remove the forums-personal-li which took the ‘forums tab’ completely away! 🙂 So why can’t I just do this somewhwere in css?

There so many people asking the same question as me and getting just as frustrate… why can’t there be an update that simply allows deactivation of forums?

[shpitzyl]

Look at this blog post:
http://themekraft.com/blog/customize-profile-and-group-menus-in-buddypress/

I haven’t checked it, so if it doesn’t work, you can always use css.

put this line in bbpress.css in your child theme:
#forums-personal-li {display:none;}

[Stephen Edgar]

You probably just need to target the CSS to only there forum titles:

#bbpress-forums ul.forum-titles {
	background: none;
	margin: 0;
	list-style: none;
}

[IngeT]

How can I show the freshness links within the different subforums, but not on the forum overview page (where all forums are listed)?

I found a way to make them invisible through css, but now they’re invisible everywhere.
I don’t want them to show here but I DO want them to show within the subforums, like this one.

Thanks in advance!

(Apologies if this pops up twice, I made this topic before but it only showed in my profile, not here).

[IngeT]

How can I show the freshness links within the different subforums, but not on the forum overview page (where all forums are listed)?

I found a way to make them invisible through css, but now they’re invisible everywhere.
I don’t want them to show here but I DO want them to show within the subforums, like this one.

Thanks in advance!

[lizat]

I want to change the default look of my forums.

1. I like the way this forum and the index looks. The Index has a summary of the forums and the forum threads page has a summary of forum stats. In both cases these are in a left sidebar. How can I achieve this?
2. Currently the first item in the forum is justified left. The first reply under it is also justified left, rather than indented. Subsequent replies are then indented as I would expect. How can I get the first reply indented…. a CSS change?

Thank you……….liz

[batmanfan]

Thanks Robin. You have been a great help.

I read through and tried https://codex.bbpress.org/bbpress-styling-crib/

What I did,
1. installed Simple Custom CSS plugin – all ok
2. insert the below code. and changed the font-size: 1.1em; to 1.6em

#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;
}

but the rest doesn’t seem to work…especially
Number 5. Various texts

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

I change the font-size: 20px

nothing happens. 🙁

what did I do wrong? basically I wanted to increase font size for all forum section from 1 to 8. How please.

Thank you in advance

[Magic-Komplex]

Unfortunately there is no button to change this, I wanted the same thing for my forum. But it’s really not a huge thing you have to change within the code. See the detailed explanation how to achieve this here, it’s quite easy:

http://www.thespiritualpath.de/wp-content/uploads/2014/03/error.jpg

4. Adding code to our child theme’s style.css

[remymedranda]

Downloaded the template pack, and added the css that you posted in the other thread,
everything seems to looks good, except 1 thing…

Please take a look….http://kylekushman.com/forum/

Where it says “Directions for using the Message Board” right below the tabs. Anyway to place this in its own grey table field just like where is says write below Cannabis Cultivation….?

[kvr28]

thank-you, you want to see a awesome forum, look here

http://www.itinerantangler.com/blog/board/forums/

zach was kind enough to share his css with me on this thread

Fly-Fishing Site

so I copied and pasted it into my themes custom css and tried it, some things worked well, some things didn’t with my theme, so it got me thinking, since I know pretty much nothing about css, I started looking at other bbpress forums and just started inspecting elements to see how they got the affect that I liked, I spent about two weeks doing this, here is the css I ended up with and I use that loop-forums on the other thread, not sure why it’s giving errors for you, I found another example of a loop-forums I found and tested on my staging server and it is pretty close to what you want I think, the link for that is on the other thread

.single .entry-title { display: none; }

.entry-title { display: none; }

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

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

/* =Breadcrumb and Tags
-------------------------------------------------------------- */
div.bbp-breadcrumb {
	float: none;
	display:block;
	border: 1px solid #e4e4e4;
	padding:9px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	background-color: #f5f5f5;
}
div.bbp-breadcrumb p{
	margin:0 !important;
}
.bbp-breadcrumb a{
	position:relative;
}
.bbp-breadcrumb a:before{
	border-bottom: 20px solid rgba(0, 0, 0, 0);
    border-left: 18px solid #E1E1E1;
    border-top: 20px solid rgba(0, 0, 0, 0);
    content: " ";
    display: block;
    height: 0;
    left: 100%;
    margin-left: -7px;
    margin-top: -19px;
    position: absolute;
    top: 49%;
    width: 0;
    z-index: 1;
}
.bbp-breadcrumb a:after{
	border-bottom: 20px solid rgba(0, 0, 0, 0);
    border-left: 18px solid #F5F5F5;
    border-top: 20px solid rgba(0, 0, 0, 0);
    content: " ";
    display: block;
    height: 0;
    left: 100%;
    margin-left: -8px;
    margin-top: -19px;
    position: absolute;
    top: 49%;
    width: 0;
    z-index: 1;
}
a.bbp-breadcrumb-home,
a.bbp-breadcrumb-root,
a.bbp-breadcrumb-forum,
a.bbp-breadcrumb-search,
span.bbp-breadcrumb-current  {
    display: inline-block;
    line-height: 20px;
    padding: 0 10px;
	font-size: 1em;
	color:#818181;
}
div.bbp-breadcrumb,
div.bbp-topic-tags {
	font-size: 12px;
}
#bbpress-forums div.bbp-breadcrumb p,
#bbpress-forums div.bbp-topic-tags p {
	margin-bottom: 10px
}
div.bbp-topic-tags {
	float: right;
}
div.topic-author-displayname,
div.reply-author-displayname {
	
	color: #EB4B00;
	font-size: 16px;
}
	.user-id-1 div.topic-author-displayname,
	.user-id-1 div.reply-author-displayname{ 
		font-weight: bold;
	}

/* =Forms
-------------------------------------------------------------- */
#bbpress-forums fieldset.bbp-form legend {
	padding: 5px;
}
#bbpress-forums fieldset.bbp-form label {
	margin: 0;
	display: inline-block; 
}
#bbp-edit-topic-tag.bbp-form fieldset.bbp-form label,
#bbp-login fieldset label,
#bbp-register fieldset label,
#bbp-lost-pass fieldset label {
	width: 100px;
}
#bbpress-forums fieldset.bbp-form p,
#bbpress-forums fieldset.bbp-form textarea,
#bbpress-forums fieldset.bbp-form select,
#bbpress-forums fieldset.bbp-form input {
	margin: 0 0 8px;
}
form#bbp-your-profile fieldset.submit {
	border: none;
}
textarea#bbp_reply_content,
textarea#bbp_topic_content,
textarea#bbp_forum_content {
	width: 98%;
	box-sizing: border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
textarea#bbp_forum_content {
	height: 210px;
}
#bbpress-forums fieldset.bbp-forum-form-attributes {
	width: 200px;
	float: right;
	clear: none;
	margin-left: 25px;
}
.bbp-topic-form,
.bbp-reply-form,
.bbp-topic-tag-form {
	clear: left;
}
body.topic-edit .bbp-topic-form div.avatar img,
body.reply-edit .bbp-reply-form div.avatar img,
body.single-forum .bbp-topic-form div.avatar img,
body.single-reply .bbp-reply-form div.avatar img {
	margin-right: 0;
	padding: 10px;
	border: 1px solid #ddd;
	line-height: 0;
	background-color: #efefef;
}
body.page .bbp-reply-form code,
body.page .bbp-topic-form code,
body.single-topic .bbp-reply-form code,
body.single-forum .bbp-topic-form code,
body.topic-edit .bbp-topic-form code,
body.reply-edit .bbp-reply-form code {
	font-size: 10px;
	background-color: #f0fff8;
	border: 1px solid #CEEFE1;
	display: block;
	padding: 8px;
	margin-top: 5px;
	width: 369px;
}
	.form-allowed-tags code {
		background: #bcd7f3 !important;
		font-size: 11px !important;
		border: none !important;
		width: auto !important;
		color:#333 !important; 
		white-space: normal !important;
	}
#merge_tag,
#delete_tag {
	display: inline;
}
div.bbp-submit-wrapper {
	margin-top: 15px;
	float: left;
	clear: both;
}

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

#access {
background: #D9D9D9;
padding-left: 0 !important;
padding-right: 0 !important;
}

#bbpress-forums li.bbp-header {
background: #D9D9D9;
border-top: none !important;
width: 99%;
border-bottom: 1px solid #d3d3d3 !important;
}

#footer-area {
background: #D9D9D9;
}

.bbp-footer {
background: #D9D9D9;
}

#bbpress-forums li.bbp-header {
        font-size: 1.3em;
}

.bbp-topic-title {
   font-size: 1.1em;
}

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

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

blockquote:before {content: ‘\275d’; color: #555; font-size: 15px; width: 15px; height: 15px; line-height: 15px; margin-left: -70px; margin-top: 10px; float:left; }

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

.bbp-admin-links a {
color: #00548c !important;
}

.bbp-admin-links a:hover {
color: #d54e21 !important;
}

[Robin W]

This comes from your theme’s main style, in my case

a:link { 
color : #EEEEEE !important ; 
}

if you want to change this throughout your site, then drop this into your style.css (or amend the current setting)

If you just want it in bbpress

#bbpress-forums .bbp-author-name a:link { 
color : #EEEEEE !important ; 
}

should work

[Robin W]

put this code into your style.css in your theme

#bbpress-forums li.bbp-header {
	background: #dc9e5a !important ;
}

You should select the color you want

[Majijiboo]

Thanks. You did a great job modifying your layout so that images and text were placed in different parts of the forum. Do you know of a good resource or a term I should google to learn how to do that? I understand html, css, and how to build php hooks, but I do not know how to modify a forum layout. For example, I would like to have an image that is right before my forum title after you click on a forum name. Thanks.

[jesseaaron]

Sure thing. I recently installed bbpress and wanted to adjust the Single Forum Slugs to a different name so the URL isn’t /forums/forum/. When I tried to save I go the Cheatin Page.
I’ve also recently installed myCred and have been making tiny CSS adjustments to the bbpress classes (just colors and font size & weights).

[Stephen Edgar]

This primarily fixes forum subscriptions to be compatible with bbPress v2.5.3 and v2.6alpha

* Removes ie.css that was a theme CSS file and not a bbPress CSS file
* Updated CSS including RTL and minified versions
* Adds user profile forums subscription management
* Updated bbpress-functions.php to be compatable with bbPress v2.5.3 and v2.6alpha

I have tested this with bbPress v2.5.3 and v2.6alpha and the Twenty Thirteen and Twenty Fourteen themes.

Note: In the CSS I have added the responsive CSS changes via bbPress #1933 but I have kept the ‘epicwebs’ CSS after these changes so they will override any of the media queries that were introduced. This will need to be tested and tweaked so that eventually the CSS’ media queries are the last section of CSS.

You can see the ‘Pull Request’ I have submitted for @Lynq here:
https://github.com/EpicWebs/bbPress-starter-theme-epicwebs/pull/5

Once he has had a chance to review it and merge it things will be good to go.

If you know your way around GitHub you can download that pull request and test it out.
(In other words I’m not going to be giving GitHub tutorials today 😉 )

[lkicknosway]

I just installed bbPress on my site. I wanted to change the setting from disallow editing after 5 minutes to 10 minutes but when I click save changes I get a “Cheatin’ uh?” Page. Even if I don’t change anything and click save changes I still get the “Cheatin’ uh?” page. Why is this and how can I get it to save my changes?

I installed bbPress version 2.5.3 and my WordPress version is 3.8.1. I’ve also installed W3 Total Cache Plugin. I have disabled minify of HTML & XML but have JS minify enabled and CSS.

Thanks in advance.

[Allegrif]

Hey, I’m a total newbie. No real experience of CSS or PHP, stuck for what to do. I’m using the Mantra theme, and it’s absolutely fantastic, but the forums don’t display quite right. The ‘subscribe’ button for subscribing to specific forums is right next to the forum title, without any spacing (“Home > Forums > GeneralSubscribe”)
Also, the ‘freshness’ title is displayed just below and to the right of the topic title, with time of post below both ‘voices’ and ‘posts’. Would provide link but constantly changing site to try and fix.

If I change theme it works, so it must be a theme issue, but I could really do with sticking with Mantra. For the level of customisation it’s very easy for me to use.

Thank you 🙂

[beinar]

I have created a child theme to my Twenty Eleven theme and it is active. But when I want to do changes by inserting code right under the code sector that ends with:
……

@import url(“../twentyeleven/style.css”);

it does not take action.

For instance, I want to change the font size in a bbPress forum by putting in:

#bbpress-forums .bbp-forum-info .bbp-forum-content,
#bbpress-forums p.bbp-topic-meta {
font-size: 18px;
margin: 5px 0 5px;
padding: 0;
word-wrap: break-word;
}

but nothing happens.
What is wrong?

[Thaddeous]

As I read through this thread, I’ve seen a lot of confusion on the proper way to install the bbress Theme Lynqoid has provided. Hopefully this post can put most of those questions to rest along with a few tips.

Note: This install is not a bbPress install in and of itself and likewise should only be installed IF you wish to “re-theme” the way bbPress looks already installed on your current theme.

To install:
1. Download the bbPress theme from Lynqioid’s Github. You can do this here:
https://github.com/EpicWebs/bbPress-starter-theme-epicwebs

2. Open the folder so you see all the files. As of 03/18/14, you should seeing the following:
– bbpress
– css
– extras
– bbpress-functions.php
– README.md

3. Use an ftp program (I recommend filezilla) to open up your website and follow this path:
wp-content -> themes -> “your theme” STOP

4. Simply drag the files named in step 2 into your root theme folder and the changes should show after loading.

Tips:
1. This files must be placed in the root of your theme folder, NOT your child theme folder.

2. Your may see a folder file within your theme that reads “bbPress” already. I am not sure if this folder was placed from the bbPress plugin or if your theme already contains its own bbPress styling….. Either way, Do not erase the original folder or place the files from step 2 into this folder even though it reads “bbPress”. Leave it. Lynqoids theme will not erase it since he has named the folder “bbpress” without a capital P. So in the end if you see two folders named “bbPress” and bbpress”, have no fear. Just remember to place the files into your root theme folder and all should be fine and dandy.

3. If you are not comfortable doing this yourself for fear of royally messing up all the long hours you have put into your bbPress forums, simply do a backup of your site and experiment without a worry.

Hope this helps. To your success!
Cheers

Tad
theig072@gmail.com
http://www.fretbuzz.com

[joshwinkles]

After installing and setting up the plugin, Is there anyway to just make the forum look like styling on this forum? I didn’t know if that file was available anywhere.

[Lynq]

You can hide it using CSS, but off the top of my head i’m not sure what the class or id is for that dropdown.

#select_id { display:none; }

Replace the #select_id with the id of that dropdown on your forum.

[Robin W]

elegant – depends !

If you simply alter this file then on any bbpress version update you’ll lose the changes, so make a note of them.

There are alternatives

1. Add the css styling change to the style.css file within your child theme.

If you have a child theme, then this is ideal, as neither plugin nor theme update will affect your change. Simply add the code below to your style.css

/*Styling for forum description */
#bbpress-forums div.bbp-forum-content {
clear:both !important;
margin-left: 0px !important;
padding: 0 0 0 0 !important;
	}

2. If you only have a main theme, then consider using a child theme – it’s quick and easy to create one, basically it’s just a theme that you create that says “use this main theme, but then add these bits”. Google child theme video and you’ll get loads of help.

3. Add this to the style.css in your main theme
But you’ll need to keep a note of it for theme upgrades, so this is really no better than changing in the bbPress template, and neater to do it in bbPress than your theme

4. Make a directory called css in your theme (either child or main) and copy the bbpress.css file into it. Then make changes there. this then won’t be overwritten on upgrades, but you will not get the benefit of changes to the default bbpress.css that may be in upgrades.

Overall 1. is by far the best choice, as you keep the code no matter what happens. Otherwise keep a note of your changes (which are fine, and are what I did to test prior to putting the end result in my style.css), so that you can replicate them on upgrades.

[oweniverson]

i’m not a developer by any means, but this seems to work (there’s probably a better way 🙂
in my bbpress.css file here “wp-content\plugins\bbpress\templates\default\css”
i just broke out “div.bbp-forum-content” from this:

#bbpress-forums div.bbp-forum-content,
#bbpress-forums div.bbp-topic-content,
#bbpress-forums div.bbp-reply-content {
	margin-left: 130px;
	padding: 12px 12px 12px 0;
	text-align: left;
}

to this:

#bbpress-forums div.bbp-forum-content {
	margin-left: 0px;
	padding: 12px 12px 12px 0;
	text-align: left;
}

#bbpress-forums div.bbp-topic-content,
#bbpress-forums div.bbp-reply-content {
	margin-left: 130px;
	padding: 12px 12px 12px 0;
	text-align: left;
}

and set that left margin to 0 px rather than 130.
let me know if there’s a better or more elegant way!