[hypnoscribe]

I am using Thesis 2.1 theme and adding .css changes in the custom css section where all my other site customizations are.

This is the info in the css crib :

#bbpress-forums .submit {
background-color: #a0668d;
color: #FFFFFF;
float: center;
vertical-align: middle;
border-radius: 10px;
height: 35px;
width: 80px;
font-size: 18px;
}

But what i want to do is change all the submit buttons individually beacause .bbp_user_edit_submit button is not showing proprely.

But i have yet to find the right path to change the submit buttons.

Any help would be appreciated.

Also, in the user edit section. When on profile, the avatar is grayed out. How can i fix this?

And… how do i fix avatar size in topic section.

Sorry for typo mistakes, im french canadian speaking.

[Robkk]

this is the css to customize the color , i already put purple in, you can change that to a specific color.

if you are using the bbpress-new ui plugin , i dont know if that will cause a conflict or not.

copy this css anywhere where you can put custom css

jetpack custom css module
custom css plugin
bbpress.css file

HEADER

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

i also put the footer css just in case you want to edit that too.

FOOTER

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

Links that might help

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

bbPress Styling Crib

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

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

Codex

[Robkk]

@terriswiatekyahoocom

do mess with the templates in the plugin folder they will just be gone when you update the bbpress plugin.

just copy the templates to your child theme and edit those.

do not do inline styles, you can just add a class to the link and add the css to the bbpress.css file that you should copy to your child theme in a folder called css.

i would recommend not to put the code into your pagination template. it would be fine if you just put it into content-single-topic.php you can just put it i think under
<?php bbp_single_topic_description(); ?>

i gave you the wrong code earlier actually so my bad, the one i had takes you to the forum index.
this is the final code should be this exactly

<?php if ( bbp_is_single_topic() ) : ?>

<a class="bbp-back-to-forum" href="<?php bbp_forum_permalink(); ?>">Back to <?php bbp_forum_title(); ?></a>	
	<?php endif; ?>

what this does is only show the link on a single topic, so it wont show it on topics started page a subscribed/favorited topics page.

it takes you to the forum of any topic you have, so if you have multiple forums you wont have to write the exact link everytime.

it adds a class which is a.bbp-back-to-forum

and the link shows the actual name of the forum.

then you can style the link by using.

a.bbp-back-to-forum {
float:left;
}

drop the css into your bbpress.css in your child theme.

also please read the codex, it has alot of very useful information about bbPress.

Codex

[atfpodcast]

I want to change the color background for the table where it says Forums, Topics , Replies and Freshness. i don’t know css or php I am using dreamweaver to try to figure out these short color codes. This is what I want to do: (photoshop was used to create the effect)

Like how the new ui plugin for bbpress does it but my color scheme. I just cant find the table

[andrecgro]

First of all, congratulations of your plugins, you guys did a real good job, again.
I’m trying to customize the theme of my bbPress forum and I can’t figure out how to edit some things.
For example, how can I edit,individually, the itens “Author” and “Post” on the section 5 of http://codex.bbpress.org/bbpress-styling-crib/

Thank you guys for helping me.

[Vadim]

bbPress 2.5.4, WordPress 4.0, Theme: Accelerate.

Font size does not depend on the theme.
Extra small font is not convenient read.
Please do, the size of 16px.

I can do it myself, I know the file bbpress.css.
But also for the new font size need to customize the size of all the blocks of the forum.
The names of the words in different languages ​​have different widths blocks.

[CodingMachine]

And if you want to hide your closed topic just do it in css

#bbpress-forums .status-closed, #bbpress-forums .status-closed a {
display:none;
}

[DVDfever]

I want to change the horrible green colour in the forum, but looking in bbpress.css, I’m getting nothing like the following which I saw on here. I’ve searched aplenty on this forum but just can’t find it. How do I change the colours, please?

.forum a { color: white !important; }

.bbp-forum-info { color: black !important; }

.bbp-forum-topic-count { color: black !important; }

.bbp-forum-reply-count { color: black !important; }

.bbp-forum-freshness { color: black !important; }

[jessy]

Rewrite your theme styles with this, paste this on very bottom on style.css or into <head> tag section and wrap t with <style text/css></style>:

#bbpress-forums p.bbp-topic-meta span {
   white-space: nowrap;
   background: none;
   border: none;
}

[Ricsca2]

@robin-w With the code you’ve written now the various parts of the forum is bigger.
The problem is that I can not change manualente all parts of the theme.
The theme for bbPress does not have a css because it goes to get the css of wordpress theme right?

As ever with the theme HUEman this does not happen?

Very thanks

[Robin W]

Without a url or screenshot I can’t really help further – there are several places where bbpress has font sizes eg

#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: 12px;
	}

#bbpress-forums .bbp-forums-list li {
	font-size: 11px;
}

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

#bbpress-forums .bbp-forum-info .bbp-forum-content,
#bbpress-forums p.bbp-topic-meta {
	font-size: 11px;
	}

and lots more

I can only suggest you try some of the above in your custom css BUT put ‘!important’ after the px part to ensure that it is not overwritten eg

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

[Ricsca2]

I have insert

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

in bbpress.css but nothing has changed.

[cubeacid]

So, I have managed to hide “post-form” by editing “bbpress.css”-file

Added line “display: none;”

#bbpress-forums fieldset.bbp-form {
display: none;
clear: left;

But this hides “post-form” completely so I’m not able to, for example, reply any topics there are in forums. Anyone?

[NLBlackEagle]

I found the way to fix the gray out issue for most people. However this didnt worked for me.

In this folder: /wp-content/plugins/bbpress/templates/default/css
Open up bbpress.css and find #bbpress-forums .status-closed,

I changed color: #ccc; to #000;

This should have fixed the gray out issue. However it did not worked =/

This is a paste of the bbpress.css file: I changed line 59

http://www.hastebin.com/ilehunucay.css

[NLBlackEagle]

I found a topic on this issue, however I Didnt managed to fix it ( Im using Magicraft theme by the way )

I found the bbpress.css and added:

#bbpress-forums .bbp-body .status-closed,
#bbpress-forums .bbp-body .status-closed a {
color: #ccc;
}

#bbpress-forums .bbp-body .bbp-topics-front ul.super-sticky,
#bbpress-forums .bbp-body .bbp-topics ul.super-sticky,
#bbpress-forums .bbp-body .bbp-topics ul.sticky,
#bbpress-forums .bbp-body .bbp-forum-content ul.sticky {
background-color: #ffffe0 !important;
}

Anyway, even if the gray out issue was fixed, I still can’t see any content of the closed topic.

[Hector]

hi @giantqtipz, in wp-content/plugins/bbpress/templates/default/css/bbpress.css

search line 121:

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

Changing the display: inline to display: list-item

regards 😉

[Icaroferreira]

I use UserPro plugin, and there is a CSS option, when I put this CSS, nothing happens =(

My site is still under construction, see link:
http://ajudaroproximo.com.br/foruns/topico/bem-vindos-ao-forum/

How do I send an image attachment, and thus show you how I like to stay?

[Robkk]

try this css code i forgot about min-width for a second.

im setting a minimum width of the picture to be at least 100px just like this forum has.

#bbpress-forums div.bbp-reply-author img.avatar {
border: medium none;
min-width:100px!important;
max-width: 150px!important;
padding: 0px;
margin: 12px auto 0px;
float: none;
max-height: 150px!important;
}

[Icaroferreira]

This CSS below did not increase the width and height of the photo:
#bbpress-forums div.bbp-reply-author img.avatar {
border: medium none;
max-width: 150px;
padding: 0px;
margin: 12px auto 0px;
float: none;
max-height: 150px;
}

This CSS increases the space between the photo and the post, but does not increase the size of the photo (does not increase the width and height of the photo):
#bbpress-forums div.bbp-forum-content,
#bbpress-forums div.bbp-reply-content,
#bbpress-forums div.bbp-topic-content {
margin-left: 150px;
padding: 12px 12px 12px 0;
text-align: left;
}

So I wish I could increase the size of the width and height of the picture, and also the space between the picture and the post.

[Robkk]

you dont need to bump your topic up.

and if you have more questions make a new topic.

i already gave you css on how to change the reply author avatar here
https://bbpress.org/forums/profile/robkk/

the space between the avatar and the post can be increased by adding this and changing 130px to what your max-width of image is , as i said the max-width of the image at the site you led me to has a max-width of 150px so my css for the post would be something close to.

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

to rename roles you can use the code on this , download and upload as plugin or copy from add filter down and put it into your child themes functions.php

https://gist.github.com/ntwb/7864894

[Icaroferreira]

In my plugin UserPro, has a page of CSS, which changes the bbPress forum.

So what could I use CSS to change three items:
– The image (photo that appears when you make a post).
– Space between the photo and the message (because when I increased the width of the photo, the photo was leaning against the post).
– And also how do I over the photo, appears a name, example: “Moderator”, “Admin”, “Member” …?

Help me please.

[Robkk]

i think you alread implemented the login and register buttons you were talking about.

i also recommend adding a border to the text input boxes of the register and login forms, because they seem invisible, and also for the submit buttons for each form.

you can just use simple css to fix that.

to edit the appearance of the forum you can copy bbpress.css into your child and edit that then changes you make will affect the look of your forum.

you can also copy the templates in wp-content>plugins>bbpress>templates>default>bbpress

i recommenced just copying the whole bbpress folder into your child theme.

there is more in the documentation about this.

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

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

Functions files and child themes – explained !

Layout and functionality – Examples you can use

looking through the rest of the bbpress documentation isnt a bad thing too.

Codex

[Robkk]

i did not create a page for the forum archive using the shortcode.

but i did get full width on all the bbpress post type pages by creating a bbpress.php then using this css code.

.bbpress .main {
background: none repeat-y right 0;
padding-right: 0px!important;
}

[Robkk]

you can first seperate the role , reply author name , and avatar.

i just put loop-single-reply.php into my child theme folder called bbpress

then i just remove this line in loop-single-reply.php

<?php bbp_reply_author_link( array( 'sep' => '<br />', 'show_role' => true ) ); ?>

and replace it with these three lines of code.
this code also puts the role above the avatar.

<?php bbp_reply_author_link( array('show_role' => true, 'type' => 'role' ) ); ?>
<?php bbp_reply_author_link( array( 'show_role' => false, 'type' => avatar , 'size' => auto ) ); ?>
<?php bbp_reply_author_link( array( 'show_role' => false,'type' => 'name' ) ); ?>

and to have that sites kind of avatars you dont have a fixed width so the avatars size varies a little bit in height and width but it has a max width it never go bigger than.

to do that you would have to use this.

max-width and max-height are both 150px you can change that to whatever you want.

add this css whereever you can have custom css

bbpress.css in a child theme
child themes css
jetpacks custom css module
custom css plugin

#bbpress-forums div.bbp-reply-author img.avatar {
    border: medium none;
    max-width: 150px;
    padding: 0px;
    margin: 12px auto 0px;
    float: none;
    max-height: 150px;
}

if you change your mind about having the varied avatar sizes
you can remove 'size' => auto in the avatar code. which would leave the default 80px
or change 'size' => auto to whatever number you want example 'size' => 60

[Robin W]

ok, just looked and all the pages look fine now except the forum page – is that correct?

bbpress should use the bbpress template for all the pages, so you can’t really css the individuals (or not without tons of code).

How are you going to the initial forum ? is it method 1 or 2 from the following

Step by step guide to setting up a bbPress forum – Part 1

and whichever try the other !

Once you are consistently wrong on all pages, you can make it consistently right !