[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”

[Robkk]

sorry i forgot about this.

but since you have a full width forum try adding all this CSS to have bbPress look better.

.bbpress-forums .col-2cl .main {

	padding-right: 0;

}

.bbpress .site,

.bbpress .site-header,

.bbpress .site-content .entry-header,

.bbpress .site-content .entry-content,

.bbpress .site-content .entry-summary,

.bbpress .site-content .entry-meta,

.bbpress .page-content {

	max-width: 100%;

}

.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;

	}

}

[Robkk]

first change the PHP function to this, it bugged me that its not lowercase.

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' );

Thats CSS in the topic you linked to , put it anywhere you can put custom css

a child themes style.css file
a custom css plugin

this is basically what you would need in your code.

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

you will need an image in your child theme in a folder called images though for what they have.

you can test it out by just changing the background color for the users.

#bbpress-forums .bbp-body .keymaster div.bbp-topic-content, 
#bbpress-forums .bbp-body .keymaster div.bbp-reply-content {
background: blue;
}

there should be classes inserted for every role

.keymaster = Keymaster
.moderator = Moderator
.participant = Participant
.guest = Guest

[DigitalNinjaZA]

Hey guys. I’m busy customizing my forum page.

I’m using WP Visual Composer Plugin to add some elements to the Forum Page, but every time I click update and reload the page they’re gone? Maybe they’re being overridden by css or bbpress code?

How can I fix this?

I’ve checked the bbpress shortcodes for visual composer but don’t think that will fix it. As I’m simply trying to add a header and footer image, plus a Custom header.

Thanks in advance.

[Robkk]

@darkoned12000

i think this CSS should fix your issue.

there might be more areas for this to be added like on profile topics started and such , so i recommend looking through your style.css file and find lines similar to these and fix them so they dont affect bbPress as harshly.

contact your theme author about help with this if you want.

follow these two guides to make your theme fully compatible with bbPress.

https://codex.bbpress.org/theme-compatibility/getting-started-in-modifying-the-main-bbpress-template/

https://codex.bbpress.org/theme-compatibility/

.single-forum .enigma_blog_post_content img,
.forum-archive .enigma blog_post_content img,
.topic-archive .enigma blog_post_content img {
  max-width: none !important;
}

.single-forum .avatar-14,
.forum-archive .avatar-14,
.topic-archive .avatar-14 {
  display: inline !important;
}

.single-forum .author_detail_img,
.forum-archive .author_detail_img,
.topic-archive .author_detail_img {
  width: auto!important;
  height: auto!important;
  float: none!important;
  margin-right: 0!important;
  margin-bottom: 0!important;
}

[Robkk]

You can follow the last entry i added to the very bottom.

it should help with most of the topic icons.

Layout and functionality – Examples you can use

i will put how to use CSS at the bottom later.

but the category/forum icons you might need a custom way to list the forums , im going to need more time on that.

your CSS is wrong too .

you can use these as examples

.bbpress a.forum-title:before {
  font: normal 16px/1 'Fontawesome';
  content: '\f07c';
  margin-right: 5px;
  float: left;
  padding-top: 3px;
  color: #222;
}

.bbpress a.forum-link:before {
  font: normal 16px/1 'Fontawesome';
  content: '\f016';
  margin-right: 5px;
  float: left;
  padding-top: 3px;
  color: #222;
}

[j0n4h]

I posted a bunch of images of examples that I thought would be useful, however the anti-spam tool this forum is using chose to delete my post. That being said, @robkk , these options:

• Icons for Subcategories that help to differentiate between subcategories – simple css
• “New” icons for new posts – show icon from date of creation.
• “Sticky” icons for stickied posts – simple css
• “Hot” icons for posts that are popular -show the label when a reply level hits

Would be tremendously useful for me, and though you claim they would be easy to implement, have thwarted me so far. I tried to create a post about it, however apparently the excess of example links deemed it un-postable as dictated by the anti-spam tool.

I’ve searched for the answer and found this:

.bbp-forum-34 i:before {
  content: "\e112"; /* glyphicons_ */
}

but I’m trying to complete using Font Awesome icons, so I’d imagine I’d have to try:

.bbp-forum-1168 i:before {
  font-family: FontAwesome;
   content: "\f095";
}

however, I have no idea where to pass this into. And I’m also not sure if this is appropriately how you use Font Awesome as read by CSS.

[Robkk]

i agree with these

Posts Count & Join Date Under Username – just post count and join date on profile.

“Report” Option – It would be good for moderation.

Attachments – but just using the Add Media button , ive been messing with this lately.

Things that should be a plugin

Private Responses – kind of a toss up , its not hard to create though. or are you talking about Private messages??

“Like” button – bbPress has a favorites option , like buttons per reply should just be a plugin, there are nice options for plugins though.

dictate if there are “new” or “unread” posts – there is a lot of options in plugins for this and they are quite different too, it really depends if its good for users to have an option on what they want or what.

Ability to “Quote” users – we have threaded replies as an alternative. it could be a feature in the future , but i think it should stay in plugin territory for now.

things that are easily possible to create in my opinion

Icons for Subcategories that help to differentiate between subcategories – simple css

“New” icons for new posts – show icon from date of creation.

“Sticky” icons for stickied posts – simple css

“Hot” icons for posts that are popular -show the label when a reply level hits

Ability to Rename bbpress specific vernacular (IE “Last Post” in place of “Freshness”) – put the templates in your child theme / create a custom language file for your site/ custom function.

Format Categories vs SubCategories in Traditional Forum Style – there is three ways you can have this functionality.

Signatures – you can create a custom text description box in your profile and then just show it after your reply content with a function.

things that are already in bbPress

Sort Forum by Recently Updated, Most Replies, Most Viewed, Etc. – bbPress views does this.

Basic editor for responses including format help – the default quicktags seem basic

[Robkk]

i think any rating plugin should work with bbPress but you would have to manually configure most of them in the bbPress templates in your child theme.

you can follow the very bottom of this topic and use the thumbs rating plugin.

you could probably use CSS to make the blocks actually look like thumbs or something.

Request: Voting

there is also this from a really popular developer , usually some of his plugins are good for bbPress.

https://wordpress.org/plugins/wp-postratings/

random list of post rating plugins

wordpress.org/plugins/voter-plugin/
wordpress.org/plugins/voting/
wordpress.org/plugins/kento-vote/

Are there any other options? Could the programmers possibly consider making it a standard part of bbPress? It does seem like such a standard function nowadays.

This really looks like it should be plugin territory, there are already so many options to choose from WordPress plugins and some quite different , its kind of good for people to have options on this.

[Tweett]

The headings (Voices, Posts, Freshness) at the top of the forums are all scrunched together. I’ve been tinkering around in the css, but I can’t seem to get them to separate. Can anyone help me out here?

[w-sky]

Yes, I added CSS code to change the width of two rows of the forum index:

li.bbp-forum-topic-count,
li.bbp-topic-voice-count,
li.bbp-forum-reply-count,
li.bbp-topic-reply-count {
float: left;
text-align: center;
width: 12%;
}

li.bbp-forum-freshness,
li.bbp-topic-freshness {
text-align: center;
float: left;
width: 20%;
}

And also this, because the topic display was to wide too:

.bbp-reply-content p {
width : 580px !important ;
}

Maybe I could fix the problem here by also setting the width to 580px for the edit field, but I have no clue how.

[sharongraylac]

Hello!

I’d like to stylize the “subscribe” link on my forum page and the “subscribe” link on the topic header with different css.

Is there a specific class that would target the .subscription-toggle only on the general forum page?

Thanks!
Sharon
bellynsoul.com

[Robkk]

They work fine.

there is some CSS hiding your content though. i just changed clear:none to clear:left

if you find any other style awkwardness tell me and i could fix it pretty quick.

add this anywhere you can add custom css

#bbpress-forums #bbp-user-wrapper ul.bbp-lead-topic, 
#bbpress-forums #bbp-user-wrapper ul.bbp-topics, 
#bbpress-forums #bbp-user-wrapper ul.bbp-forums, 
#bbpress-forums #bbp-user-wrapper ul.bbp-replies, 
#bbpress-forums #bbp-user-wrapper fieldset.bbp-form {
  clear: left;
}

[w-sky]

Hi Robkk, no I did not create a bbpress.php, nor did I make any other changes than shown in the other thread – I added some definitions to the css of our theme, to adjust the width problem at forums list and at topic (content) display.

I guess, now I could either fix also the width of the editor area individually and hopefully then I’m done (but how?), or try to find the cause of the problem between bbPress and our theme.

Which is a mod of the free “Quark” theme https://wordpress.org/themes/quark/ …

[w-sky]

Hi there, this is a follow-up to my post because as it turned out, those were not the main problem. (The post display was too wide, similar to the problem below; and the translated german titles of the message count rows were wrapped to a second line, whereas the shorter english titles would have worked. Both were fixed individually by css.)

Now I am still having this problem with at the compose area. See below. This is an animated GIF to show the effect when some text is entered.

[w-sky]

I added this to my child theme’s css and now it’s looking fine (before the count width was 10%, freshness width was 22%):

li.bbp-forum-topic-count,
li.bbp-topic-voice-count,
li.bbp-forum-reply-count,
li.bbp-topic-reply-count {
float: left;
text-align: center;
width: 12%;
}

li.bbp-forum-freshness,
li.bbp-topic-freshness {
text-align: center;
float: left;
width: 20%;
}

[quentinpotgieter]

Basically i have various forums:
1. Forum
2. Classifieds
3. Volunteers
4. Sponsors

I need to show the user their topics separately:
1. Forum – Your topics
2. Classifieds – Your Ads
3. Volunteers – Your Opportunities
4. Sponsors – Your Opportunities

I will use css to achieve hiding unneeded forum id’s, but need to create a page template to return all the user’s topics.

[quentinpotgieter]

My apology, thank you for your response. I need to use the loop in the user-topics-created.php that shows the user’s created topics within my own page template with the header and footer. I need to make different page templates that will be exactly the same, but using css show/hide different forum categories.

Do you need a link to the site in example?

Is it possible to create my own page template to loop the user’s created topics?

I will be more patient to your response, but looking for a solution before end of Monday if possible.

Thank you.

[Robin W]

1. put this in your child theme style.css

.bbp-reply-content p {
width : 580px !important ;
}

2.

In the forums list, the titles (in German) for topic and post count rows are wrapped to the next line because the rows are too narrow.

presume these are Themen & Beiträge, in which case they look fine to me.

[Robkk]

@davidnsfw

alright since i think your site has jetpack installed

make sure you have the custom css module activated in jetpack .

now go to appearance > edit css

copy this code into your custom css editor.

.bbpress .post-section {
  margin: 0 2% 20px 2%;
  width: 96%;
}

.bbpress #content-main {
  width: 100%;
  margin-right: 0;
}

hit save

check and see if it works

if the code does work, reply back on here that it works now.

if the code doesnt work i need to see if any Custom CSS on bbPress would show . so copy and replace my old CSS code that you just previously pasted

with this code

.bbpress a {
  color: red;
}

now see if your links on your forum are red

if it turns red, reply back here that your links are red and that i need to add more classes to your original CSS so i could make your forum full width.

[Robkk]

These two Custom CSS rules should help.

put them anywhere you can put custom CSS

child themes style.css file
jetpacks custom CSS module
a standalone custom css plugin.

.bbpress .post-section {
  margin: 0 2% 20px 2%;
  width: 96%;
}

.bbpress #content-main {
  width: 100%;
  margin-right: 0;
}

if this does not work try this CSS for a test

if the links in your forum turn red the CSS is working.

.bbpress a {
  color: red;
}

if the links are red and my above CSS rules for full width arent working i probably have to redo the CSS rules i gave you above to include more div classes which will be super annoying.