[alekseevas]

Hello!
Tell me, please, in what file you can edit the сascading style sheets for forum on bbpress?
– To change the font size (too small).
– To change the order of sub-forums – that was a column (and not in line).

* bbPress version – 2.5.7

[Robkk]

bbPress is inheriting some CSS from your theme that is suppose to be for the WordPress comments.

try this custom CSS to fix the issue

#bbpress-forums .reply {
  margin: 0px;
}

[Robkk]

use this PHP function to resize the small avatars

function my_bbp_change_avatar_size($author_avatar, $topic_id, $size) {
    $author_avatar = '';
    if ($size == 14) {
        $size = 24;
    }
    $topic_id = bbp_get_topic_id( $topic_id );
    if ( !empty( $topic_id ) ) {
        if ( !bbp_is_topic_anonymous( $topic_id ) ) {
            $author_avatar = get_avatar( bbp_get_topic_author_id( $topic_id ), $size );
        } else {
            $author_avatar = get_avatar( get_post_meta( $topic_id, '_bbp_anonymous_email', true ), $size );
        }
    }
    return $author_avatar;
}

/* Add priority (default=10) and number of arguments */
add_filter('bbp_get_topic_author_avatar', 'my_bbp_change_avatar_size', 20, 3);
add_filter('bbp_get_reply_author_avatar', 'my_bbp_change_avatar_size', 20, 3);

The CSS you would have to use now is

#bbpress-forums .bbp-author-avatar .avatar-24 {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border: none !important;
}

and you can remove the first function i gave you to test with

[Robkk]

try this CSS code and hopefully this fixes your issue.

it looks too small at 14px so i bumped it up to 24px , you can change that back to 14 if you want.

#bbpress-forums img .avatar-14 {
  height: 24px;
  width: 24px;
  padding: 0;
  border: none;
}

[jonotrain]

Update: I figured out that I needed to be editing the bbpress.css file in my bbpress folder, and that I needed to edit the following definitions:

#bbpress-forums #bbp-search-form #bbp_search {
display: inline-block;
width: auto;
}

#bbpress-forums #bbp-search-form #bbp_search_submit {
}

However, if I add “height:15px;” to both entries the result is that the boxes become smaller but the “Search” text in the button is cut-off completely, instead of re-positioning and/or resizing. If there is a way to reposition/resize the text it will work.

[jonotrain]

on my forum (http://libraryofbabel.info/forum/?page_id=14 – WP 4.2.2 – bbp 2.5.7) I am trying to resize the search input box and the search submit button. I would like both of them to be smaller in the vertical dimension. I have tried adding the following to my theme’s css file:

.bbp-search-form {
height:10px;
}

But this changes its location – moving it closer to the table beneath it, without changing its size. What do I need to do to change the size?

[Robkk]

WAIT: I think I found it here:
http://www.theworshipcommunity.com/members/admin/forums/subscriptions/

There you go!

Also, if you’re good w/ design/style, etc — can you tell me why my right sidebar gets pushed down to the bottom of the page on certain forum pages?

i tired it last night but i couldn’t find what was causing the problem easily through CSS, i would have to dig in your code more.

[Robkk]

@juggledad

@robkk: Just to clarify something, the OR function_exists(‘is_bbpress’) was added (with some other code, to get around a bug that bbpress doesn’t seem to want to acknowledge or fix. see https://bbpress.trac.wordpress.org/ticket/2723

Thanks for pointing that out, i did not know about that bug.

Okay with this bug in bbPress you cannot use the WP conditional is_single() to affect all of the bbPress pages, since for some reason there is a bug for single user pages.Thanks for creating the trac ticket, I tested out and see that yes it does not work on user pages. Over the next few days/week i will check it out and see I can come up with a fix.

But this bug is easily avoidable by creating a bbpress.php for your theme and just using the_content() instead of bfa_post_bodycopy() and removing OR function_exists('is_bbpress') from the bfa_post_bodycopy() function. The bbpress.php file also helps remove other post meta that might not be useful for bbPress forums instead of using CSS to hide them.

The OR function_exists('is_bbpress') you can keep in bfa_get_options.php though as i do not see any problems with that.

If there is something you can find on your end to fix the issue with your theme and bbPress then please drop an answer on this topic, because i haven’t looked and learned your theme 100% yet. Removing the function exists and creating a bbpress.php is the quickest solution to the problem that I could find.

@kitfreeman

This excerpt issue that you are seeing affects all of these areas

category pages
tag pages
author pages
archive pages
search result pages
and the home page

which is where all the excerpt theme settings modify.

[Robkk]

bbPress is inheriting .hentry and .reply styles from your theme.

you can add this custom css to fix it.

#bbpress-forums .reply {
  margin-left: 0;
  text-align: inherit;
}

#bbpress-forums .hentry {
  margin: 0;
}

[Chad R. Schulz]

I know this is an old post. However, I’ve been screwing around with various javascript suggestions from other forums and came up with a solution that works (no problems yet discovered). I’m not exactly a code ninja, so if anyone can help to streamline the code let me know.

Just insert the following lines into a custom javascript for your theme (if you need guidance on this there’s a lot of help available all over wordpress.org and other forums).

jQuery(function($) {
	var forum_input = $( '#bbpress-forums textarea' );
	var forum_button = $( '#bbpress-forums .submit' );
	var forum_limit = 50;
	var forum_class = $( '<div class="forum_limit_info"><span>' + forum_limit + 
	    '</span> characters needed</div>' ).insertAfter( forum_input );
	forum_button.hide();
	forum_class.show();
	
	forum_input.bind( 'keyup', function() {
		var forum_length = $(this).val().length;
		var chars_left = forum_limit - forum_length;

		$( '.forum_limit_info span' ).html( chars_left );

		if (forum_input)
			( chars_left > 0 ) ? forum_class.show() : forum_class.hide();
		
		if (forum_button)
			( chars_left > 0 ) ? forum_button.hide() : forum_button.show();
	});
});

Basically this function hides the submit button and displays a countdown text counter until the minimum length is reached and then the button appears and the counter disappears.

There are ways of hard-coding a minimum into php but I believe you have to edit core files and then insert these modified php files into a child theme. I couldn’t figured out how to insert a simple php function that would do what I wanted in a clean and simple way. So javascript it is.

The forum_limit setting can be anything you want it to be, just change it. And you can customize your topics and replies minimums separately, if needed, with separate javascript functions using textarea#bbp_reply_content, textarea#bbp_topic_content instead of #bbpress-forums textarea.

For my CSS stylings I chose to put a :before message on the left and the character count on the right using these:

.forum_limit_info {
  text-align: right;
  font-size: 13px;
  color: red;
  line-height: 1.2;
  margin: 5px 5px 0px;
}

.forum_limit_info:before {
  float: left;
  content: '(Minimum Length: 50)';
  color: blue;
}

CSS Styling is theme dependent and can basically be however you want/need it to be–very flexible.

I also created a similar javascript function for my site’s commenting system. Here’s that code as well:

jQuery(function($) {
	var comment_input = $( '#commentform textarea' );
	var comment_button = $( '#entry-comment-submit' );
	var comment_limit = 25;
	var comment_class = $( '<div class="comment_limit_info"><span>' + comment_limit + 
	    '</span> characters needed</div>' ).insertAfter( comment_input );
	comment_button.hide();
	comment_class.show();
	
	comment_input.bind( 'keyup', function() {
		var comment_length = $(this).val().length;
		var chars_left = comment_limit - comment_length;

		$( '.comment_limit_info span' ).html( chars_left );

		if (comment_input)
			( chars_left > 0 ) ? comment_class.show() : comment_class.hide();
		
		if (comment_button)
			( chars_left > 0 ) ? comment_button.hide() : comment_button.show();
	});
});

Good luck to all,

Chad

[PinkishHue]

You can do this either by using CSS to simply hide that information, or in the PHP templates where you can remove it completely.

There’s a couple of similar threads here that may help you:

Removing "HTML tags and attributes"

HTML tags and attributes

Hope that helps 🙂

[Robin W]

Sorry, been busy with other things – thanks for the reminder.

Having taken a second look, I think boith are coming form your theme, not bbpress.

I can’t hide the first one, as it is also used by other post enturies on the site, so suggest you lose the blue one, for which you need to put the following in your style.css

see

Forum & Thread Titles Duplicated

.entry h1 {
    visibility: hidden !important;
}

You might need to check that this doesn’t affect anything else – I can’t see that it did – worse case is that you would not see a blue title, so if you have any others in the site this might affect them.

[fmckinnon]

OK, after a long, painful day of multiple attempts, we finally successfully migrated our forums to bbPress. We’ve been on vBulletin for many many years.

We integrated with BuddyPress – the site can be seen here:
http://www.theworshipcommunity.com

First Impressions:
Clean, slick, overall, a better design once we tweak the .css to make the forums (specifically) look better.

Performance: not sure if it’s a plugin or what, but overall performance is sluggish on both the Buddypress and the bbPress side.

Biggest Disappointment:
By far, the biggest disappointment and biggest feature request, in less than 24 hours of use, is the inability to find ANY plugin or way to easily let a forum user in bbPress show UNREAD threads/replies in one location. I’ve installed the pencil plugin, the “go to first unread post” plugin (which doesn’t seem to be showing up) and another plugin that puts a “new” icon next to a forum .. but that still requires one to click on each forum and dig through to try and find the actual new post or reply.

Someone PLEASE tell me that my 24+ hours of searching and scouring these forums and google results that a decent way to do this is out there? (w/o modifying core files)

[tarnvogL]

@robkk
this CSS transforms every letter in a capital letter. But I want that letters like the “L” in my name (in this forum) should be written in a capital letter. So maybe this is more a php issue ..?

[tarnvogL]

@robkk
thank you!
To give the usernames some custom css, I added a custom class into the loop-single-reply.php
Here is the part of the code with the custom class (custom-forum-user)

[...]	
<?php do_action( 'bbp_theme_before_reply_author_details' ); ?>
   <div class="custom-forum-user"> 
	   <!--- <?php bbp_reply_author_link( array( 'sep' => '<br />',  'show_role' => true ) ); ?> -->
		<?php bbp_reply_author_link( array( 'sep' => '<br />', 'size' => 150 ) ); ?>
   </div>  <!--- custom-forum-user -->

		<?php if ( bbp_is_user_keymaster() ) : ?> 
[...]

But the problem still appears, even when I am not loading my custom loop-single-reply.php. So I think it is not an issue of that.

I also deleted the user links to their forum profile in my functions.php. But even this (I tested it) is not the cause of the problem with the lower case letters. This is everything I changed regarding the forum user names.
What do you think can I do to fix this issue?

[tarnvogL]

this CSS transforms every letter in a capital letter.
Actually thats a strange thing, I don’t have the CSS class “a.bbp-author-name”.
I made some small changes in the loop-single-reply.php, but even when I am not loading the modified .php file, the “a.bbp-author-name” class does not appear.

Here is the link to the forum: http://community.riseinnature.com/forums/topic/testtopic-3/

In this example, the “J” of julian and the “L” of tarnvogl are actually written in capital letters.

Maybe it is a wordpress issue, because when I add a user manually in the backend, only lowercase letters are allowed. But if you try to register on the front end, it will accept names with capital/uppercase letters. Feel free to create an account with capital letters and try it for yourself.

Thank you for helping me with this 🙂

[Robin W]

ok, so 3 stages

1. create the style.css entries – say you have a forum called ‘fred’ you might want to create a ‘fred’ style and have content for this eg

.fred #fixed-background { background: url(‘http://www.mysite.com/wp-content/uploads/2015/02/fredbackground.jpg’); }

2. look up the forum’s ID

go to dashboard>forums>all forums and hover over the ‘edit’

at the bottom of the screen you’ll see

http://www.mysite.com/wp-admin/post.php?post=2921&action=edit

in this case 2921 is the forum ID

3. add the style to the body class for that forum

Add this into your functions file

function rew_add_class ($classes, $bbp_classes, $wp_classes, $custom_classes ) {
	//the above line pulls in the pre-existing values so we don't lose them - ie run this function using this existing $variables if they exist
	//then we check is this is a forum using a bbpress function
	if ( bbp_is_single_forum() ) {
	$bbp_forum_id = bbp_get_forum_id();
	if ($bbp_forum_id == 2922) $custom_classes[] = 'fred' ;
	if ($bbp_forum_id == 2923) $custom_classes[] = 'george' ;
}

	//then we check is this is a topic using a bbpress function
	if ( bbp_is_single_topic() ) {
	//and if so look up the forum id of that topic
	$bbp_forum_id = bbp_get_topic_forum_id();
	//now you will need to add lines for each forum you have and say which class class you want to use, these are just example lines.  Add one for each forum
	//the number is the 'page_id' (actually it's the post id !)
	if ($bbp_forum_id == 2922) $custom_classes[] = 'fred' ;
	if ($bbp_forum_id == 2923) $custom_classes[] = 'george' ;
		}
	//then this gets merges into the existing wordpress and bbpress classes
	$classes = array_merge (  (array) $classes, (array) $custom_classes ) ;
	Return apply_filters( 'rew_body_class', $classes, $bbp_classes, $wp_classes, $custom_classes ) ;
}

add_filter ('bbp_body_class' , 'rew_add_class') ; 

[Robkk]

install this plugin

https://wordpress.org/plugins/bbpress-genesis-extend/

try this CSS

#bbpress-forums .bbp-reply-content p,
#bbpress-forums .bbp-breadcrumb p {
font-size: 15px;
}

[Robkk]

try this CSS instead.

#bbpress-forums .keymaster div.bbp-topic-content, 
#bbpress-forums .keymaster div.bbp-reply-content,
#bbpress-forums .moderator div.bbp-topic-content, 
#bbpress-forums .moderator div.bbp-reply-content {
background: #f8f8f8 url(images/team-member.png) top right no-repeat;
}

[Robin W]

try adding

# bbpress-forums content-area ul li {
margin-left: 0px !important;
}

to your child theme style.css

Functions files and child themes – explained !

[VeeLow]

I added some css in the custom css plugin, in order to get my bbpress forums full-width (drawing the code from an example in these forums). Success! or so I thought.

But not quite. Now, the “members” pages associated with the pulldown menus at the upper right are “too long”–text entry/text display boxes run over into the space of my right content sidebar. When I deactivate the css plugin, my problem goes away.

(WP 4.2.2, bbpress 2.5.7, Buddypress 2.2.3.1; theme is TwentyFourteen; I was able to see the same problem previewing 2013.)

Here’s the css in question:

.site,
.site-header {
	max-width: 100%;
}

.bbpress-forums .col-2cl .main {
	background: none repeat-y right 0;
	padding-right: 0;
}

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta, 
.page-content {
	max-width: 100%;
}

.form-allowed-tags {
	display: none;
}

div.bbp-breadcrumb, 
div.bbp-topic-tags {
	font-size: inherit !important;
}

#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: inherit !important;
}

#bbpress-forums {
	font-size: inherit !important;
}

.bbpress .hentry {
	margin: 0 auto 48px;
	max-width: 100%;
}

@media screen and (min-width: 1008px) {
	.bbpress .site-content {
		margin-right: 0;
		margin-left: 182px;
	}
}

@media screen and (min-width: 1080px) {
	.bbpress .site-content {
		margin-left: 222px;
	}
}

@media screen and (min-width: 1218px) {
	.bbpress .site-content .entry-content {
		margin-right: 0;
	}
}

@media screen and (min-width: 673px) {
	.bbpress .site-content {
		margin-right: 0;
	}
}

Can anyone help? I’d love to keep the full-width forum pages, but if it messes up the member pages, it’s a deal breaker…

[checmark]

I am using the Avada theme on my website, WelcomeToEcuador.ca, and I downloaded the zip file and installed the folder in the Avada folder, but nothing changed on the forum. I wanted to try your work because the forum looks terrible and I couldn’t figure out where to edit the CSS. I opened the file from the CSS folder but it’s all running together and would be very hard to edit. Is there a way I can get this working?

Appreciate your help.

[knowlengr]

Wordpress 4.2.2
BBPress 2.5.7
Parent theme Genesis, child theme also by StudioPress

Need to make the content and reply body font size slightly bigger. Looks like it’s rendering at the equivalent of 5 or 6 pt. I tried theme Twenty Twelve with the same result. Styling for all other classes is fine.

http://pharmacytechnology.kryptonbrothers.com/forums/topic/complex-event-processing/

the class is “bbp-reply-content” – And same result for “bbp-breakcrumb.”

I see that these are set as 12px in bbpress.css which would be fine, so I have an override in place somewhere.

Is there an existing topic for this? I use Firebug occasionally but not often enough to avoid this post in the bbPress forum.

Thanks

[Robin W]

each forum will show a forum ID eg

<div id=”post-2921″ class=”post-2921 forum type-forum status-publish hentry”>

So yes you can, but unless you’re familiar with things like firebug and CSS, then you’ll need experienced help.

[Robkk]

you insert this into a child themes function.php file or a functionality plugin

function rk_show_role_classes($classes) {
    $replyid = bbp_get_reply_author_id();
    $bbp_get_role = bbp_get_user_display_role($replyid);
    $bbp_display_role = strtolower($bbp_get_role);
	  
  
	$classes[] = $bbp_display_role;
	return $classes;
}
add_filter( 'bbp_get_topic_class','rk_show_role_classes' );
add_filter( 'bbp_get_reply_class','rk_show_role_classes' );

this custom css you can put in your child themes style.css file or a custom css plugin.

#bbpress-forums .bbp-body .keymaster div.bbp-topic-content, 
#bbpress-forums .bbp-body .keymaster div.bbp-reply-content,
#bbpress-forums .bbp-body .moderator div.bbp-topic-content, 
#bbpress-forums .bbp-body .moderator div.bbp-reply-content {
background: #f8f8f8 url(images/team-member.png) top right no-repeat;
}

now for this to work exactly like the other site , you can download this image from here, by right clicking save image as, then uploading the image to your child theme in a folder called images. Make sure its named “team-member”