[Valery Kondakoff]

Hello!

I just placed bbPress to a page, using the shortcode ‘[bbp-single-forum id=xxx]‘. Here it is how it looks: http://goo.gl/nawXlP (this is a default Twenty Sixteen theme).

Now, if i click on a topic link, a giant left indentation is introduced: http://goo.gl/LxqQVf

Is there a way to disable this indentation? Forum is almost unusable in such a small width. I was trying something like:

.bbpress #primary {
    margin: 0 auto;
    max-width: 980px;
    width: 100%;
}

But this does not works. Are there any ideas, how to eliminate this indentation?

Thank you!

[Valery Kondakoff]

To be sure there is nothing wrong with my WP+bbPress install, I just reinstalled WordPress from scratch and added bbPress as the one and only plugin (this is the default theme Twenty Sixteen).

Here is a screenshot: http://goo.gl/1Bll3A

Why bbPress ‘reserves’ this left-margin space. Can this indentation be disabled?

Thank you!

[Pascal Casier]

I would need a link to see the CSS behind …

[Valery Kondakoff]

Here it is: http://rugby-forum.ru/wp3/forums/

Looks like this code helps a little bit:

.bbpress .entry-content {
  float: none !important;
  width: auto !important;
}

Are there any better solutions? And why bbPress reserves this space?
Thank you!

[Pascal Casier]

The style is coming from somewhere else (probably your theme) and the ones you need to work on are exactly the ones you mention:
.entry-content {
float: right;
width: 71.42857144%;
}
Seems the only thing to do.
Pascal.

[Valery Kondakoff]

Pascal, thank you for help!

The theme used is the default (for the WP 4.4.2) Twenty Sixteen. This is a fresh install, no theme modification or other plugins are used. Can we think of this issue as of a bug?

[Pascal Casier]

Anyway to switch to e,g twenty fifteen to see if it works fine there ?

[Valery Kondakoff]

Just tested several default WP themes with bbPress (from 2010 to 2016). Here they are: http://vkondakoff.synology.me/photo/share/8erFChRr

2010, 2012, 2013 and 2015 are looking good. 2011 is cropped by it’s right side even without anything in WP sidebar. 2014 is just to small is size (don’t know why). 2016 is just cropped on the left side…

[Pascal Casier]

Thanks for the test. I have the same issue on 2016, so I created trac ticket https://bbpress.trac.wordpress.org/ticket/2921
Let see if something can be done, for now you will have to live with the CSS trick above

Pascal.

[Valery Kondakoff]

Thank you for adding a ticket. Hopefully this will be fixed.

Maybe it is a good idea to add another ticket as well: the bbPress does not follow switching color scheme in the default WP theme (Twenty Sixteen). Here are the details and a screenshot: https://bbpress.org/forums/topic/bbpress-does-not-support-the-default-wp-theme-when-switching-to-dark-scheme/

[Robkk]

This issue is theme related, because bbPress is just inheriting the CSS styles from the themes stylesheet. Same thing with the other themes, there are just some styles that could affect some classes in the code that can make the layout look different.

In the theme compat code in bbPress, has it where you can use default WordPress conditionals like is_single() which should show up for each single forum and topic, and is_archive() for the forum archive (forum root page) and topic archive (usually at yoursite.com/topics or forum root).

So while you did create a single forum page using shortcodes as an easy to do workaround, as the code for the “indentation” is created by your themes CSS and only for single pages using ,while you created a simple page. When you enter the normal forum url in 2016 you will see the same “indentation” you see on topics.

You are on the money on what CSS to use to fix the issue, there is just some media queries that you need to add is all. There will be a slight margin to the right around 700px width when the sidebar goes under the content, but a page has that same margin in your theme and for consistency I just say leave it in.

This CSS should help your help solve your issue.

@media screen and (min-width: 61.5625em) {
.bbpress .entry-content {
  float: none;
  width: auto;
}
}