[Robkk]

the font is light gray because you closed the topic.

add this css anywhere you can add custom css,
also maybe change #000 to whatever shade of black you use for your fonts on your content.

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

[Robkk]

@galiulinr

manually write the meta description using an seo plugin like yoasts

keep a summary for each forum description.

unless you are trying to reduce it another way??

you can also use css to clip some of the text , but its way easier and provides more flexibility the way i mentioned above.

[Robkk]

long characters are going to show up like this anyway

splitboard.co
m

you could lower the font-size a little bit more with css to allow maybe 2-3 more characters
but its still going to break the word apart if there is a certain amount of characters anyway

you could add more width to div.reply-author
maybe to about 150px

add this anywhere where you can put custom css

#bbpress-forums div.bbp-topic-author, 
#bbpress-forums div.bbp-reply-author {
width: 150px;
}

you also might have to add some @media query css too if i missed it.

[Robkk]

you add this to your themes functions.php or a functionality plugin.

you then use css to style the roles from there.

add_filter('bbp_before_get_reply_author_role_parse_args', 'ntwb_bbpress_reply_css_role' );
function ntwb_bbpress_reply_css_role() {

	$role = strtolower( bbp_get_user_display_role( bbp_get_reply_author_id( $reply_id ) ) );
	$args['class']  = 'bbp-author-role bbp-author-role-' . $role;
	$args['before'] = '';
	$args['after']  = '';

	return $args;
}

add_filter('bbp_before_get_topic_author_role_parse_args', 'ntwb_bbpress_topic_css_role' );
function ntwb_bbpress_topic_css_role() {

	$role = strtolower( bbp_get_user_display_role( bbp_get_topic_author_id( $topic_id ) ) );
	$args['class']  = 'bbp-author-role bbp-author-role-' . $role;
	$args['before'] = '';
	$args['after']  = '';

	return $args;
}

It grabs the topic or reply author role and adds another CSS class with prefix bbp-role- so you now have a new set of CSS classes e.g. bbp-role-keymaster, bbp-role-moderator, bbp-role-participant etc that you can then add your custom CSS styles to.

link this was from

Topic background color depending on role

more info about a functionality plugin

How to create your own WordPress functionality plugin

[Robkk]

you add this to your themes functions.php or a functionality plugin.

you then use css to style the roles from there.

add_filter('bbp_before_get_reply_author_role_parse_args', 'ntwb_bbpress_reply_css_role' );
function ntwb_bbpress_reply_css_role() {

	$role = strtolower( bbp_get_user_display_role( bbp_get_reply_author_id( $reply_id ) ) );
	$args['class']  = 'bbp-author-role bbp-author-role-' . $role;
	$args['before'] = '';
	$args['after']  = '';

	return $args;
}

add_filter('bbp_before_get_topic_author_role_parse_args', 'ntwb_bbpress_topic_css_role' );
function ntwb_bbpress_topic_css_role() {

	$role = strtolower( bbp_get_user_display_role( bbp_get_topic_author_id( $topic_id ) ) );
	$args['class']  = 'bbp-author-role bbp-author-role-' . $role;
	$args['before'] = '';
	$args['after']  = '';

	return $args;
}

It grabs the topic or reply author role and adds another CSS class with prefix bbp-role- so you now have a new set of CSS classes e.g. bbp-role-keymaster, bbp-role-moderator, bbp-role-participant etc that you can then add your custom CSS styles to.

link this was from

Topic background color depending on role

[akyboy]

Me again! 😛

Before i had profile link redirected to WP author page, but i returned to bbpress profile

http://www.cannedbandits.org/forums/users/ziutx/replies/

All works good, i changed some css also but bquote is cut in half for some reason. I guess because it has some fixed width?

[petriknz]

OK very green to this and trying to understand what it’s doing.

I set up a page for the forum and pulling data in with [bbp-forum-index]

The template I selected is the same as the main page and other pages on the site (note lack of sidebars) but when I select that same template for the Forum page it seems to ignore it and I end up with a sidebar.

I di not set up the website initially so don’t know what changes were in place but find it strange that this pages shows different when using the same template.

Here is the link, if you look at the other pages you’ll notice the difference.

http://www.balint.whdev.co.nz/forums/

I have not touched any of the bbpress files or css yet. I first need to know what is going on. Why it’s reading different information and where from.

[readwriteandedit]

I’m trying to format the background and the border for the lead topic, just as you’ve done here in the bbPress forum. I used Firebug to see your code, which is

#bbpress-forums ul.bbp-lead-topic li.bbp-body {
    border: 1px solid #dd6;
}
#bbpress-forums ul.bbp-lead-topic li.bbp-body div.topic {
    background-color: #0099FF;
}

But when I add this to my child theme’s CSS (where I’ve successfully made other bbPress changes), nothing changes.

I don’t know if something else I’ve changed is preventing this from changing or maybe if you have something in the setup that I don’t have, something that allows you to style this in CSS when I can’t.

Any suggestions? The forum is private, but I can get you in temporarily, if that would help. Or I could paste into a comment all the changes to bbPress I made in my CSS.

(Note: I changed your color for testing purposes)

Thanks for any help you can give me.

Beth

[Robkk]

@pilxy

you need to change this css code to make sure its only shows in the comments/replies content.

im not so sure on how to do this one.

contact your theme author

i just checked and they use bbPress for their support forums.

im sure they would help more than i can right now.

[Robkk]

I’ve also noticed my ‘Submit’ button is way further down the page and out of line with the ‘Tags’ input box, any ideas here too?

thats normal , you can see it is aligned on bbpress.org because thats something custom.

bbpress.org uses this css …i guess you can go off of it as an example.
but it causes an issue on smaller device sizes this will make it collide with the tags input.
you will need additional media query css to make it look better on smaller devices.

#bbpress-forums .bbp-reply-form fieldset.bbp-form button {
float: right;
margin-top: -120px;
}

I can’t also seem to make the quicktags bar the correct width, always seems to over-run the width despite me trying lots of different styles etc.

you can fiddle with the padding but the below css will not make it over-run.

#bbpress-forums div.bbp-the-content-wrapper div.quicktags-toolbar {
padding: 5px 0;
min-height: 30px;
width: 100%;
float: left;
}

I’ve still not found how to deal with the strange ‘e’ character,

i asked if you edited any templates , i didnt really get an answer but if you did,

it could be an edited reply-form.php and a topic-form.php .

so if you already copied these files to your child theme, check them out and see if you left a stray character somewhere.

other than that i guess make a bbpress.php if you havent sometimes if users dont it adds some additional stuff that are only suppose to be on blog posts.

more info about creating a bbpress.php

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

[Robkk]

easy way i think would be to just install this and choose the dark color.

https://wordpress.org/plugins/bbpress-new-ui/

you can also use this below css and copy it where ever you can put custom css

jetpack css module
custom css plugin
you can find the exact css in bbpress.css and just replace it with the one im posting.

you can of course change inherit to and other color like black or its hex #000 for example.

if im missing something please reply back

/* header and footer that says AUTHOR , POSTS , VOICES, TOPICS , FORUMS */

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

/* this is the background of the forums and topics that display the title, the freshness stats and so on. */

#bbpress-forums li.bbp-body ul.forum, 
#bbpress-forums li.bbp-body ul.topic {
border-top: 1px solid #eee;
overflow: hidden;
padding: 8px;
background: inherit;
}

/* this is the header that shows the post date and post ID */

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

/* try to make these two different types of dark shades if you care about having an AB color pattern of replies/topics/forums. */

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

#bbpress-forums div.even, 
#bbpress-forums ul.even {
background-color: inherit;
}

[Kajamaz]

I’m using Eclipse as my theme on wordpress.
http://generalstcg.byethost15.com/?forum=general-discussion
This is my website.
I want to be able to change the color of the text because if you go on my website, it’ll be white on white.
Is there a way to make the background a darker/blacker color and keep the white letters?
I read about bbpress.css but I have no idea where to find it or to look for it.
Can someone please help?
Thank you!

[Robkk]

I wonder if I said I wanted to go pro I bet he would reply

probably , the guy does have a separate support forum just for premium plugin users

he might just be busy and more concentrated over there more since the plugin provides income for him.

I manually did the quote and it put it in the lower area of the post.

you probably have to contact your theme author, on how to fix that.

it might be you have float:left; or clear:left; in the css and that might be causing the issue.
switching both to none should fix it.

I don’t see anything with this new plugin either… 🙁 Not even a quote either.

It’s working in IE not firefox. grrrrrrrrrrr I don’t know why it worked in raindrops when I installed it and now it wont and I cant find any plugins messing with it.

i tested the plugin in the latest firefox and chrome , not IE though.

it could be a cache system/plugin or a minify plugin minifying the direct quotes plugins javascript wrong but im just guessing right now.

i would say contact as much people as you can to help solve the issue.

hosting support
plugin support
theme support

[akyboy]

Looks like i got it!!!

1k free gold (real) w/ Overwolf WoT sponsored app

blockquote was in completely different css file, what i did is moved everything related to child theme css and then edited it there

i hope this is safe?

thanks :PP

[shriji252]

thanks bud

I had @import in my child theme

did as mentioned in

https://codex.wordpress.org/Child_Themes

put below code in style.css in child theme
———————————————–
#bbpress-forums {
font-size: inherit !important;
width: 100% !important;
}

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

.bbpress .site-content {
margin-right: 0 !important;
margin-left: 0 !important;
}
———————————–
also copied page.php (from twentyfourteen folder) and renamed to bbpress.php put in root of child theme

[Robkk]

try this anywhere where you can put custom css

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

[bsilverop]

Thanks so much again for looking at this. I just got done adding the CSS from your previous comment and it looked good to me (although it always has, it’s only on smaller monitors or screen sizes where it doesn’t I suppose). But then I added the last bit from your most recent comment and the forum page extends too far to the left in to the left sidebar. I’ve left it that way if you want to have a look, but perhaps that last piece is intended only if I want full width (without any sidebars at all)? Thanks again,

[Robkk]

alright this should be your entire css now

if the @media queries still do not work try just adding them into your child themes style.css file.

if it still doesnt work when you put the media queries in your style.css make sure you are not using @import and instead using this in your child themes functions.php

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style')  );
}

more info here https://codex.wordpress.org/Child_Themes

and also contact jetpacks plugin support and see if there is a problem or if i made another mistake or something

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

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

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

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

you can see i removed the width:100% on the #bbpress-forums css code , its because it didnt really do anything.

[bsilverop]

Thanks. I’m just using one .bbpress .site-content because I’m keeping the right sidebar. Whenever I use the @media screen piece, it just chops off what’s below it. But yes, it does seem like it’s needed. The first other person to test said that the title of the page is cut off just a little bit on the left side, where as on my end it seems like there’s plenty of space.

This is all the custom CSS if it makes a difference:

.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;
	width: 100% !important;
}

.bbpress .site-content {
	margin-right: 0 !important;
	margin-left: 182px !important;
}

And this is it after I add the @media screen tag (notice it just cuts off the rest):

.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;
	width: 100% !important;
}

@media screen and (min-width: 1008px) {

[bsilverop]

Thanks, removing @media screen and (min-width: 1008px) and adding !important seems to have worked. The forum now resizes to fit the page if you go to a smaller screen size. I appreciate the help from both @robin-w and @robkk. I didn’t expect support like this, I really am grateful. Thanks again!

Solution:

1) Copy page.php and rename bbpress.php. Remove <?php get_sidebar( 'content' ); ?> as I want to extend beyond the content sidebar.

2) Add CSS:

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

.bbpress .site-content {
	margin-right: 0 !important;
	margin-left: 182px !important;
}

[bsilverop]

Thanks for the feedback. I added the @media screen CSS suggested above, but the forum width reverts back to the way it was before. But yes, you’re right. When I go to another screen size the forum size changes.

[Robin W]

ok, in your theme css add this at the bottom

#bbpress-forums .content-area {
width: 150% !important;
}

My css is lousy, so if this doesn’t work, come back !

[toomba]

Hello,

My index (archive?) forum page is grabbing a different template from the one specified in the bbpress.php files I made. Well, I used debug bar, and it said the forum index page was serving the same template (bbpress.php) as the normal forum pages. However, it clearly isn’t as it’s displaying it has different elements + css working on them.

The problem is huge, as it’s grabbing the template I use for the main page, which has a sidebar (‘.twocol’) which I’ve reduced the width to 33.2%. This means the box the forum page is appearing in is totally squashed. I can’t amend the css for the forum index page without ruining my front page.

Can anyone help me figure out which template is being called by the forum index page, and how to make sure it just refers to the bbpress.php file?

[Robkk]

well i cant see the links on your site because its only shown if you are logged in.

but i just looked up the css selectors on here.

see if this changes the color.

a.subscription-toggle,
a.favorite-toggle {
color:328c00;
}

if you want to change the color of other links like for example the reply author link use inspect element in your web browser, and try to find the class/id then style it from there.

if sometimes some css doesnt work you would have to probably go add the parent class/id in the css or add !important to the end.

like

li.bbp-header a.favorite-toggle {
color:#328c00;
}

search up on google/youtube on how to use inspect element in your browser

more info here

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

bbPress Styling Crib

[Robkk]

the css from this code is affecting the whitespace

#left-area ul, .entry-content ul, .comment-content ul {
list-style-type: disc;
padding: 0 0 23px 16px;
line-height: 26px;
}

maybe creating a bbpress.php file could fix this or just adding #bbpress-forums to the selector with reduced padding-left .

#bbpress-forums #left-area ul, .entry-content ul, .comment-content ul {
list-style-type: disc;
padding: 0 0 23px 0px;
line-height: 26px;
}

heres info on creating a bbpress.php file.

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

umm i dont know what to tell you about the sidebar going the profile and tag pages, it might be because of the template you are using for bbpress currently so maybe making a bbpress.php could fix it but i dont know