So I am using a custom theme for my site and when I integrated bbpress into my theme the alignment is just off for some reason. On the home page the top bar is a little miss aligned where it says “topics” and “posts” Link – http://dailymut.com/dailymut-forums/

When I go into a topic the alignment is really off under “topic” and a part of background is missing under “voices” “posts” and “freshness”. And There is a random circle over the “voices” text for some reason. Link – http://dailymut.com/forums/forum/madden/mut-player-reviews/

Finally when I go into the Topic The picture is not aligned with the username and the text box looks off as well.

I have tried to change the style.css and I have tried to change the bbpress CSS and nothing has worked maybe im imputing the wrong code or maybe im not in putting it correctly. Either way if anyone can check it out and see what the problem is and could tell me what code to input and where specifically to put it that would be greatly appreciated.

[@robkk Moderator 9 years, 6 months ago]

This seems very custom , looks pretty good though

The bbPress forum header labels have certain widths to them. So this is the CSS you might want to adjust.

li.bbp-forum-topic-count, 
li.bbp-topic-voice-count, 
li.bbp-forum-reply-count, 
li.bbp-topic-reply-count {
  border: 0px none;
  width: 10% !important;
  margin-right: 20px !important;
  margin-top: 0px !important;
}

It might look shifted because you are trying to make your forums look more table like.

The username being shifted is because of some CSS from your theme being added into bbPress.

This custom css might help.

#bbpress-forums .single_post a {
  font-size: 12px !important;
  margin-left: 0 !Important;
}

[@stiffmeister12 Participant 9 years, 6 months ago]

thank you for the reply now where would this code go in the bbpress style.css? can it go directly at the end? Or am i editing the code? same goes for the themes style.css. thanks

[@stiffmeister12 Participant 9 years, 6 months ago]

I just checked my themes style.css and there is nothing with bbpress forums in it right now for some reason there is however css code in my responsive.css for bbpress forums

#bbpress-forums .status-category li.bbp-in-forum-freshness {
margin-left: 1px;
width: 33.494% !important;

#bbpress-forums .bbp-topics li.bbp-body ul.topic {
border-bottom: medium none !important;
border-left: 0 none !important;
border-top: 2px solid #aaa !important;
box-shadow: 1px 1px 0.5px 0 rgb(221, 221, 221);

[@robkk Moderator 9 years, 6 months ago]

Your theme had something similar to this CSS

.single_post a {
  font-size: 14px ;
  margin-left: 0 ;
}

So the new CSS I gave you would overwrite it only on bbPress forums.

you can add it

to your child themes style.css

in a custom css plugin

and you could add it to the bbpress.css file if you put it in your child theme in a folder called css somewhere above the media queries or just at the top above the other css rules.

[@stiffmeister12 Participant 9 years, 6 months ago]

Okay so if I am understanding this correct (sorry im still learning this stuff)
for my themes style.css files you want me to find the code

.single_post a {
font-size: 14px ;
margin-left: 0 ;
}
and replace it with

#bbpress-forums .single_post a {
font-size: 12px !important;
margin-left: 0 !Important;
}

And for this code

li.bbp-forum-topic-count,
li.bbp-topic-voice-count,
li.bbp-forum-reply-count,
li.bbp-topic-reply-count {
border: 0px none;
width: 10% !important;
margin-right: 20px !important;
margin-top: 0px !important;
}
you want me to open up the bbpress.css and add it above the media queries or just at the top above the other css rules?

[@robkk Moderator 9 years, 6 months ago]

No you were trying to find this code as if it was already in your theme , I just showed you the original code so you could understand why it was causing the issue.

But just place this CSS code where you would put custom CSS like what I already listed.

You do not have to replace any code just add it as custom css

#bbpress-forums .single_post a {
  font-size: 12px !important;
  margin-left: 0 !Important;
}

Since your bbPress forums look custom I can’t tell which is custom and what could be your theme so you would have to edit this code and replace the original code in the bbpress.css file if you want or just place it in some other custom css areas with !important after the width to help out.

You can place the code in the bbpress.css file where you want , it is your site
the two places i said would be better for beginners so that the code doesn’t conflict with the media queries.

li.bbp-forum-topic-count,
li.bbp-topic-voice-count,
li.bbp-forum-reply-count,
li.bbp-topic-reply-count {
border: 0px none;
width: 10% !important;
margin-right: 20px !important;
margin-top: 0px !important;
}