Bbpress formatting

[demonboy]

Hi,

I have a questionabout formatting the bbpress layout which you can see here:

https://followtheboat.com/forums/

The position of the forum homepage is correct but when I enter into a forum it inherits the formatting of my blog posts. This includes a large title in white font and a gap between that and the content below. I do not want it to inherit this and would prefer to have all sub-forum content look like the forum home-page (i.e. content up top with no white space).

Thanks in advance.

[christian]

Hey @demonboy,

I entered a forum page and I couldn’t see the issue. Do we need to login to see? If so, please provide WordPress admin access in a Secure Note.

Thanks.

[demonboy]

Ahem… I managed to make some formatting changes so you can’t see the original issue now, sorry about that!

But… there is one other formatting issue I’m keen to resolve. The forums home page (link in OP) is just a white background, but all subpages inherit the formatting of a post, as expected. Those post pages contain the title and the forum and the side bar in a light grey box (see https://followtheboat.com/forums/forum/qas/ as an example). How do I replicate this formatting for the forum home page, bearing in mind this is a dynamically created page?

[albrecht]

Hi @demonboy,

Just to clarify, you want to put the forum page inside a grey box like the forum’s sub-pages. Is that correct? If yes then try this custom css code.

.forum-archive .widget_display_replies ul {
    background-color: #f8f8f8;
}


.forum-archive .site>.x-container {
    background-color: #f8f8f8;
    padding: 30px;
    position: relative;
    z-index: 999;    
}

Hope it helps.

[demonboy]

Man, you are on fire today! Once again, praise be to albrechtx

[jade]

You’re most welcome, @demonboy.

[demonboy]

OK, I have another page I’d like to add the grey box to. I’m hoping I can just add to the .forum-archive .site>.x-container { selector with the page id but despite using the inspector I’m struggling a bit to put the box around everything but the title. I am trying to emulate this:

https://followtheboat.com/ftbmates/forum/monthly-giveaways/

Where the grey box only starts after the title. If I add this to the code you supplied above:

.forum-archive .site>.x-container, .page-id-40297 .site>.x-container {
background-color: #f8f8f8;
padding: 30px;
position: relative;
z-index: 999;    
}

…the grey box is added to the title as well. What is the selector for everything beneath the title?

Thanks!

[Prasant]

Hello @demonboy,

Thanks for updating the thread.

Can you please share the URL of the page where you are trying to add grey box after title but facing some issues to make the necessary changes? I checked the URL that’s shared but looks like that’s a reference to something that you are looking for.

Thanks.

[demonboy]

Ooops, sorry, Prasant! The link is here:

https://followtheboat.com/join-ftbmates/

[albrecht]

Hi @demonboy,

To achieve that you can edit each of the section in the edit with pro page, give the section with the title a transparent background and the other sections that gray background. Also you need to remove the css you made so the background won’t be overridden. Here’s a screenshot of where you can find it.

Another solution:
If you prefer to use a custom css, then try this css.

.page-id-40297 #cs-content > .x-section:first-child {
    background: transparent !important;
}

.page-id-40297 #cs-content > .x-section {
    background: #f8f8f8;
}

.page-id-40297 #cs-content > .x-section:first-child > .x-row{
    margin:0;
}

Hope it helps.

[demonboy]

Hi Prasant.

Sorry, but neither option works, but I realised what I was doing wrong. I changed the page layout to ‘full-width’ and it sorted it. Thanks!

[lely]

Thank you for updating us @demonboy and we’re glad this is now sorted out!

Cheers.