[Ricardo Bueno]

I’m setting up/testing bbPress on this URL:
http://www.contentsmartslab.com/membersite/forums/forum/content-smarts/

I can’t seem to check the box that says “notify me of follow-up replies via email.” I have the subscribe option properly setup on the back-end. I’m wondering if I messed up the input CSS somewhere here, or something else. Any thoughts?

[Robin W]

That’s interesting because both topic and reply should both use the same class and styling to display (or not!) the avatar and name.

The code they are drawing from is around line 208 in bbpress.css

#bbpress-forums div.bbp-topic-author a.bbp-author-name, #bbpress-forums div.bbp-reply-author a.bbp-author-name {
clear: left;
display: block;
}

you could add

#bbpress-forums div.bbp-topic-author a.bbp-author-name, #bbpress-forums div.bbp-reply-author a.bbp-author-name {
background-color : none !important ;
}

in your style.css to this to see if it clears it.

Otherwise post a link to your url and I’ll take a closer look

[jslom]

For some reason this code was not implemented into my bbpress defauly bbpress.css file.
I am posting it so you guys can update it for future releases..

When posting an image to the forum your current css makes the image 100% width, so it does not break the forum layout. Unfortunately this does not keep the image proportional so the height stays the same. All you have to do is this.

Change

#bbpress-forums div.bbp-topic-content img,
#bbpress-forums div.bbp-reply-content img {
	max-width: 100%;

To

#bbpress-forums div.bbp-topic-content img,
#bbpress-forums div.bbp-reply-content img {
	max-width: 100%;
        height: auto;

[robahas]

Hi – I figured this out. Everything under a forum category is a descendant. So based on that you can select an entire “section” of the forum. Here is the code (this is in the genesis framework, so adjustments would be needed for applying to the body class in non-genesis installations). The key is to get the ancestors of the current post, and if your top level forum is included, then apply the css.

add_filter( 'body_class', 'sp_body_class' );
function sp_body_class( $classes ) {
    global $post;
    $anc = get_ancestors($post->ID, 'post');
     if ( is_single( '1530' ) || in_array('1530', $anc) )
          $classes[] = 'custom-class';
          return $classes;
}

[Robin W]

Drop the following into your theme’s css

#bbpress-forums .status-closed, #bbpress-forums .status-closed a {color: #000 !important;}

Come back if you need further help doing that.

[traemccombs]

Heh, stop being so awesome in your replies. 🙂

Anyway, me, the non-coder, still doesn’t understand why it(bbpress plugin) can’t simply have an option to use styles from other themes. If nothing else, the CSS etc would be a nice “base” for things like link colors, font sizes, whatever.

*sigh*

I tried bbPress Tweaks. Meh.

I’ll read the link you posted. Hopefully it doesn’t suck.

bbPress has such a non-WP feel about it though in everything I’ve come to expect from WordPress. Part of it is my frustration with PHPBB, and part of it is my frustration with not being able to get a non-sucky looking forum with bbPress.

And, I have yet to see a non-sucky bbPress based forum. Most are fairly crappy in how they present and deal with the content.

Easy of me to throw stones in a glass house when I don’t code I guess. I just wish there were more sane defaults in bbPress that looked better out of the box.

[joneslloyd]

Hi all,

I don’t know if this is a known issue or not, but on this site:

Forum

If you click on any of the forums (fora?), you’ll see that there are many topics, and there is (at the top and bottom of the topics lists) the option to click Page2, Page3, Page4 (etc.).

Clicking any of these seems to redirect you back to the page you were on.

Likewise, if you go in to a particular topic (one with many replies), you would have been able to see that clicking Page2, Page3, Page4 (etc.) also just basically refresh the page you were on (though I’ve disabled pagination here for practical reasons).

I am using the TwentyThirteen theme with a modified header image and some CSS styles (but otherwise the twentythirteen theme), and I’ve tried /%postname%/ and /%category%/%postname%/ as my permalink structure – both of which don’t work.

Here’s a TL;DR version:
Go here: http://lenkiewicz.org/forum/the-lenkiewicz-foundation/ and click (say) page 2 at the bottom, which is this link: http://lenkiewicz.org/forum/the-lenkiewicz-foundation/page/2/

But it will, when clicked, take you back to here: http://lenkiewicz.org/forum/the-lenkiewicz-foundation/

I was not running any plugins at all when this started to occur. I thought it could be a .htaccess issue perhaps..? But I wouldn’t know where to start.

Also, I’ve tried all of the repair options in BBPress many times, to no avail.

If anybody has any ideas with what’s going on here I’d be really grateful.

Thanks,
Lloyd

[Robin W]

John, really pleased that you tracked it down, and yes I’ll add it to the styling crib when I get a moment ! Often I spend hours searching for the wrong thing, the solutions here are often easy and obvious but only after you have worked them out !

The code

#bbpress-forums ul.bbp-threaded-replies{margin-left:25px;}

is exactly the same as

#bbpress-forums ul.bbp-threaded-replies {
 margin-left: 25px;
 }

The computer simply ignores gaps, and coders only write it that latter way to make it easier to read.

You ought to start using a child theme if you haven’t already got one. (just google child theme video, and you’ll get lots of help). it’s very quick and simple and does not affect you main theme, just allows you to add without losing on updates. Then you would create a directory in that called
css viz wp-content/themes/yourchildthemename/css and copy your amended bbpress.css file into that. bbPress will then use that, and you won’t lose changes.

Great that you’re fixed !

[crzyhrse]

Got it..!

I’t’s like going on an easter egg hunt and actually finding a real egg… 🙂

I measured the offset with a little pixel yardstick that plugs into Chrome, got 50px and searched the bbpress directory for that, and found this in the bbpress.css you pointed me to above:

#bbpress-forums ul.bbp-threaded-replies {
	margin-left: 50px;
}

changed that to:

#bbpress-forums ul.bbp-threaded-replies {
	margin-left: 25px;
}

Put it into the theme’s child with the other bbpress css changes I have there, and it worked… Perfectly… Hoping it might be helpful for others, or in your crib, Robin..?

Curiously, in searching also found:

in both of these-
bbpress-rtl.css
bbpress-rtl.min.css
this
#bbpress-forums ul.bbp-threaded-replies{margin-right:50px}

and in this-
bbpress.min.css
this
#bbpress-forums ul.bbp-threaded-replies{margin-left:50px}

All of which looks like no css I’ve seen, in each file one very, very, very long continuous line of code … Am wondering if there is effect from the above for other sorts of screens or browsers, or something..? If I changed these to 25px I’d likely do it directly in the files in the bbpress directory, and keep a record for bbpress updates…

Leaving it alone for now, but in case someone looks in here and has any thoughts..?

John.

[crzyhrse]

Thanks Robin and hi again… 🙂

That doesn’t find anything that seems to pertain, plenty of padding in the normal sense for various aspects of replies… And pertaining to replies is what I’m looking for because that is where the nesting (offsetting? indenting?) or threading occurs, per the Reply threading setting in the forum settings section of the Admin settings section…

I’ve searched through directories everywhere that made sense, php and css, for terms like nest, thread, indent, offset… found nothing… It would need to be some sort of code that recognized whether it was a first, second or third reply, etc, and also somehow say how much to indent… It would also seem to need to some way be affected by the setting for it, as mentioned above…

I was kinda hoping to maybe attract John James Jacoby’s attention on this, noticing how much he seems to know in the various support areas I’ve looked over time..?

This would seem to be something that would be helpful to others as well..? The default indent distance I believe is much more than is needed to show nesting, and the less it indents the less the following indents will be crowded to the right, don’t know but maybe even get cut off…?

Thanks… It is nice when someone replies, doesn’t always happen… 🙂

John.

[Mycelus]

While I appreciate your work, this is not a viable solution.

The fact that bbPress comes out of the box with a box that says “forum” makes no sense.

Any forums I’ve seen (IPB, XenForo, phpBB, etc etc etc) have boxes for each category, and then the forum names, not a box that says forum, then the categories, then the forums underneath, bbPress’ layout makes no sense and I am not looking to download a child theme and then have to customize it because I don’t currently possess enough CSS and WordPress knowledge to do so.

I am learning, Im not sitting around or anything, but bbPress should look like the other forum layouts because it’s current layout makes 0 sense.

Are there any repositories with some example images of how to go about styling bbPress? I don’t know if it’s just me but bbPress has been around for years if I’m not mistaken and there’s a surprising lack of documentation on it for how popular it is.

[Robin W]

REPEAT : It would take a long time to go through what you would need to do – Basically it is all to do with styling and functions.

The problem is that in answering this question I’d need to explain firefox and firebug, css, php bbpress structure and lots more.

But to get you started – THIS IS NOT THE SOLUTION – but a couple of lines that will see you get further forward. you’ll need to look at “inline” as well to get the is horizontal.

You could do a bar several ways, but the easiest is create a copy of your page template for bbpress to use

see https://codex.bbpress.org/step-by-step-guide-to-setting-up-a-bbpress-forum/ section 8

and then play with the following

in css add

#subnav {
background: none repeat scroll 0 0 #2020ff;
border-bottom: 1px solid #BBBBBB;
font-size: 12px;
margin-top: 81px;

}
and in you bbpress page template put under the header

<div id=”subnav”>
<ul id=”nav-user” class=”menu”>

[storm72087]

Hi guys,

I’m trying to tinker with my bbPress forum and the font sizes of the parent forums and sub forums. I found this code (#bbpress-forums li a) and entered it into my custom CSS field, but it affects both parent and sub forum titles. How do I target the parent forum titles and sub forum titles separately.

Thanks!

[Lynqoid]

Hi Mycelus,

I would recommend trying to gain a little css knowledge if your up for the challenge as it can get a lot done with WordPress and bbPress. Even just by hiding things with display:none or positioning things absolutely to get them in the right place.

If you want to try and get the look and feel of phpbb or ipboard then you could take a look at the bbPress starter theme I created. It gets you onto a good footing with the layout and then you can go onto styling the colours from there.

http://www.epicwebs.co.uk/bbpress-tutorials/bbpress-starter-theme/.

You can also find the topic about it here on bbPress: https://bbpress.org/forums/topic/i-have-created-a-bbpress-starter-theme-with-a-phpbb-look-and-feel/.

Good luck! 🙂

[Mycelus]

Hey guys. So I’m used to the regular forum format like phpBB and IP Board where it looks like this: http://imgur.com/XlyR6cc

So, where it says Welcome to IPS, that’s the category name.

Under that, you have News and Information, and Pre-Sales, those are your FORUMS.

Then you have a space underneath the categories as can be seen in the picture.

This makes sense because your CATEGORIES are SEPARATED from each other, and the FORUMS, are listed underneath.

The way bbPress it, you can click a category. This makes ZERO sense, there is NO reason to click on the category.

Also, as can also be seen in the picture, the amount of topics, and replies are to the right side, with the recent reply, time, latest thread, and time to the right.

This can be done by anyone with some moderate CSS knowledge and WordPress know how, unfortunately I possess little of both.

So I’m here for your help. Please share your wisdom with me and help me get this layout. This is a layout SO many people have asked for, yet I have found no tutorials on getting anything like this and it just astounds me considering how popular bbPress is, I don’t know why bbPress has a god awful layout.

Note: Please do not make any “well this is how bbPress is supposed to look like so you should deal with it” comments. I’m not here to hear that.

Thank you in advance to anyone who helps me achieve this. I really appreciate it.

[John James Jacoby]

Both editor.js and bbpress.css are loaded similarly, as well as other scripts and styles in certain situations (single forums/topics, and when editing your password). Are any other SSL errors present, or is it just bbPress? What version of bbPress are you using?

Without deeper investigation, I’m unsure how this is possible when using core functions and templates. bbp_enqueue_style() calls content_url() which uses set_url_scheme() which is the WordPress core function for correctly determining the http/https/relative scheme for every link on the site. This means it’s difficult for one to be wrong, and another to be right.

[David2013]

Hi i just dont know whats wrong…

when i work with firebug on css for forum page is ok but when i add to do css wont work…

#bbp-search-form div {
    display: none !important;
}

is format type wrong?

Thanks, David

[thefruitnation]

http://www.thefruitnation.com/forums/

Unsure if its my themes css or something else I did that is causing this to be so tight?

[Robin W]

ok, think the ones on the page link are around line 90 (my .css is different, so exact lines may vary) – look for

#bbpress-forums li.bbp-header,
#bbpress-forums li.bbp-footer {
	background: #f3f3f3;
	border-top: 1px solid #eee;
	font-weight: bold;
	padding: 8px;
	text-align: center;
}

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

and change background to the same as above.

They may be some others as you go through. Come back with any that are still niggling, and I’ll chase them down for you.

As you are making changes to bbPress templates, make a copy of the file onto your PC, and keep a list of what you changed, as any bbPress updates will override this file.

You should revisit child themes when you get some more time, as this is a better way to do it, but the way you’re doing will work fine (and was what I did in the early days!).

[Robin W]

Ok, you might take while to fix this, but here’s some starters.

On the correct forum, the page is using the bbpress.css under a div class of “entry content”
On the incorrect forum, the page is using your themes css under a div class of “storycontent”

On the incorrect website, I suspect that you need to take a copy of the page.php that this forum is using. Rename this to bbpress.php, and move this file to your theme’s folder. BBpress will then use this as the page style for all forum stuff. Then you’ll need to edit it to use the bbpress theme. Sounds simple when you write it, but this assumes you know what I’m talking about, and even that I know what I’m talking about! But maybe start there and see how far you can get.

[Robin W]

No problem,

Several ways to do this, the easiest is to add the following to your theme’s style.css file:

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

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

or if you are using a child theme, put in in the bbpress.css in your css folder

If you need further help, just come back and ask, or visit

Step by step guide to setting up a bbPress forum – part 2

[Robin W]

How long have you had the forum?, and how long have you had the problem?

Have you done any additional plugins, wordpress, bbpress or other plugin upgrades, or changed css or functions recently?

What versions of wordpress and bbpress are you on?

[Robin W]

it’s coming from bbpress stylesheet.

there may be a quicker way to remove this, but one that should work is as follows.

I don’t think you have a childtheme, and now may be the time to consider having one, see https://codex.bbpress.org/step-by-step-guide-to-setting-up-a-bbpress-forum-part-2/ for more details

once done you need to navigate to

wp-content/plugins/bbpress/templates/default/css/bbpress.css

copy this file into a folder called css within your theme, so you end up with
wp-content/themes/mychildtheme/css/bbpress.css

where mychildtheme is the name of your childtheme

Then edit every line that has

background-color : xxxxxxx

change to

background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4);

NOTE it goes from background-color to background
and it is only the background color that you’ll be changing, not lines which just have color: as that’ll be text!

eg

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

becomes

#bbpress-forums div.bbp-forum-header,
#bbpress-forums div.bbp-topic-header,
#bbpress-forums div.bbp-reply-header {
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
}

This will make the background transparent, but with a darker tint shading that you have in your sidebar (the amount of difference is on the 0.4 bit, 0.1 is the lightest, 1.0 the darkest).

Come back if that doesn’t fix it, or for further help

[crzyhrse]

Because I have no idea how Robin might get it otherwise, I’ll put this here as well, though the subject may call for a new thread? (although in a sense the subject here has also been about communication…)

In case you want to put this in the crib..?

Went looking for a way to change the submit button in bbpress, bigger, colors… Finally was able to assemble searched out bits and pieces from a couple places and with some experimenting accomplished my goal with this, 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;
}

I laud your efforts Robin, there really are not that I’ve ever found any organized simple ways or directions to make simple changes to simple and common things for us simple and common folks, neither for bbpress or wordpress… And a lot of what is there is old… The two links you’ve offered above are the best I’ve seen so far, and are apparently still works in progress…

No complaints here at all, just a recognition of the difficulties that are present in volunteer community efforts, especially one as widespread as all this is… WordPress is amazing, sort of like the whole world reaching to itself for shared community, open source community, so to speak…

[crzyhrse]

Well, After a lot of doodling around I’ve accomplished my goal, increased all the forum’s various text font sizes… Here is the gist of it…

I took a copy of the bbpress.css and put it into TextWrangler. Searched for all instances of font-size, made that all be listed at the top in a split window as a guide, then went through and searched and replaced for each different font-size, adding 2px to the px sizes and 0.2em to the em sizes.

Then on a copy of that, with all font-size instances again listed at the top to guide me, I went through and eliminated everything BETWEEN the sections that had a font size in them. I ran all that was left through a code checker- http://jigsaw.w3.org/css-validator/validator -which said it was good.

I then tried what Jared suggested at the beginning of this thread and that I’ve seen suggested elsewhere (often by Jared), I created a folder in the theme’s child folder called bbpress, and copied that modified and reduced bbpress.css file into that folder…

No go, that did not work… So, I then copied and pasted that very same code directly into my child theme’s style.css, and yea, it was working, changed it all… Went back and got rid of thee above mentioned folder, and it still worked..

It may be that there are things that didn’t need to change to accomplish my goal, but it works, nothing is too big and all of it is now easy to see without squinting… 🙂 I could imagine doing a similar process for other sorts of changes, if a change seems to be called for…

Here is the modified code… I believe I could have also eliminate everything but the font sizes and the parts that do the targeting (properties?), but I think this makes it easier to place where things are at in the full file, and I might want to change some other font attributes at some point…

Hoping this might be helpful… I’ve sured learned some things today…

/**
 * bbPress specific CSS
 *
 * @package bbPress
 * @subpackage Theme
 */

#bbpress-forums {
	background: transparent;
	clear: both;
	margin-bottom: 20px;
	overflow: hidden;
	font-size: 15px;
}

#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: 15px;
	overflow: hidden;
	border: 1px solid #eee;
	margin-bottom: 20px;
	clear: both;
}

#bbpress-forums .bbp-forums-list li {
	display: inline;
	font-size: 13px;
}

#bbpress-forums div.bbp-forum-title h3,
#bbpress-forums div.bbp-topic-title h3,
#bbpress-forums div.bbp-reply-title h3 {
	background: none;
	border: none;
	font-size: 18px;
 	line-height: 1em;
 	margin: 8px 0;
	padding: 0;
	text-transform: none;
}

#bbpress-forums div.bbp-forum-author .bbp-author-role,
#bbpress-forums div.bbp-topic-author .bbp-author-role,
#bbpress-forums div.bbp-reply-author .bbp-author-role {
	font-size: 13px;
	font-style: italic;
}

span.bbp-author-ip {
	font-family: 'Helvetica Neue', Arial, Helvetica, 'Nimbus Sans L', sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #aaa;
}

div.bbp-breadcrumb,
div.bbp-topic-tags {
	font-size: 15px;
}

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

.bbp-row-actions #favorite-toggle a {
	text-decoration: none;
	padding: 0 3px 1px;
	color: #7c7;
	border: 1px solid #aca;
	background-color: #dfd;
	font-weight: bold;
	font-size: 15px;
}

.bbp-row-actions #subscription-toggle a {
	text-decoration: none;
	padding: 0 3px 1px;
	color: #7c7;
	border: 1px solid #aca;
	background-color: #dfd;
	font-weight: bold;
	font-size: 15px;
}
	
#bbpress-forums .bbp-forum-info .bbp-forum-content,
#bbpress-forums p.bbp-topic-meta {
	font-size: 13px;
	margin: 5px 0 5px;
	padding: 0;
	word-wrap: break-word;
}

	.bbp-topic-pagination a {
		font-size: 12px;
		line-height: 11px;
		padding: 1px 3px;
		border: 1px solid #ddd;
		text-decoration: none;
}

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: 12px;
	background-color: #f0fff8;
	border: 1px solid #CEEFE1;
	display: block;
	padding: 8px;
	margin-top: 5px;
	width: 369px;
}

#bbpress-forums div.bbp-the-content-wrapper textarea.bbp-the-content {
	width: 100%;
	margin: 0;
	font-size: 15px;
}

#bbpress-forums div.bbp-the-content-wrapper input {
	font-size: 15px;
	padding: 5px;
	margin: 0 2px 0 0;
	line-height: 1em;
}

	#bbpress-forums #bbp-your-profile fieldset span.description {
		margin: 5px 0 0 20%;
		font-size: 15px;
		font-style: italic;
		float: left;
		clear: left;
		width: 60%;
		padding: 5px 8px;
		border: #cee1ef 1px solid;
		background-color: #f0f8ff;
}

	div.bbp-template-notice p {
		margin: 0.5em 0 6px 0 !important;
		padding: 2px;
		font-size: 15px;
		line-height: 140%;
}

.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.2em;
}

#bbpress-forums .bbp-topic-content ul.bbp-topic-revision-log,
#bbpress-forums .bbp-reply-content ul.bbp-topic-revision-log,
#bbpress-forums .bbp-reply-content ul.bbp-reply-revision-log {
	border-top: 1px dotted #ddd;
	width: 100%;
	margin: 0;
	padding: 8px 0 0 0;
	font-size: 13px;
	color: #aaa;
}

.bbp-logged-in h4 {
	font-weight: bold;
	font-size: 1.6em;
	clear: none;
	margin-bottom: 10px;
}

#bbpress-forums h1 {
	clear: none;
	font-size: 2.1em;
	line-height: 1em;
	padding-bottom: 10px;
}

#bbpress-forums #bbp-user-wrapper h2.entry-title {
	font-size: 1.6em;
	margin: 0;
	padding-bottom: 10px;
	padding-top: 0;
	clear: none;
}

#bbpress-forums div.row-actions {
	font-size: 13px;
	visibility: hidden;
}

	div.bbp-search-form input,
	div.bbp-search-form button {
		font-size: 13px;
		padding: 2px;
}

	#bbpress-forums .bbp-forums-list li {
		display: block;
		font-size: 13px;
}

	#bbpress-forums div.bbp-reply-author .bbp-author-role {
		font-size: 15px;
		font-style: normal;
}
	#bbpress-forums .bbp-body div.bbp-reply-content {
		clear: both;
		margin: 10px;
		padding: 0;
}
	#bbpress-forums li.bbp-header,
	#bbpress-forums li.bbp-footer {
		font-size: 12px;
}