Hello, I am using TwentyEleven and bbPress 2.1.2

TwentyEleven has a width limit 980px and that is OK.

I want to integrate bbPress but I want it to be 100% full screen width.

I do not want the whole site to be 100% full screen width.

I just want the forums to be 100% and the rest of the site to be 980px.

The problem div id=bbpress-forums is inside div id=page

page {

    margin: 0 auto;
    padding: 0 25px;
    width: 980px;
}

I don’t know how to separate these divs.

Any help? Thanks

• This topic was modified 8 months, 2 weeks ago by  Rasheed Bydousi.
• This topic was modified 8 months, 2 weeks ago by  Rasheed Bydousi.

[Rasheed BydousiParticipant @rasheed 8 months, 2 weeks ago]

Update:

I found this topic, it has the same issue.

http://bbpress.org/forums/topic/how-can-i-make-bbpress-forums-wider-than-my-usual-blog-content/

Unfortunately, the proposed solution does not solve the problem.

I’d be happy if someone will give a clue.

Thanks again.

[MelindreaParticipant @melindrea 8 months, 2 weeks ago]

Perhaps go with .bbpress .page { width: 100%; } ?

[Rasheed BydousiParticipant @rasheed 8 months, 2 weeks ago]

The problem is bbpress forums Included inside div id=page so adding width: 100%; won’t help.

[Rasheed BydousiParticipant @rasheed 8 months, 2 weeks ago]

This snapshot shows the hierarchy:

http://i.imgur.com/sAX44.gif

[MelindreaParticipant @melindrea 8 months, 2 weeks ago]

Yes, but check out the body – it has class bbPress. So .bbPress #page would affect only the forum pages.

[Rasheed BydousiParticipant @rasheed 8 months, 2 weeks ago]

You are right.
Issue solved.
Thank you for your help.

[MelindreaParticipant @melindrea 8 months, 2 weeks ago]

You’re welcome =)

[Rasheed BydousiParticipant @rasheed 8 months ago]

Hello again,

I have created a new page and added [bbp-topic-form] shortcode inside it. However, this page isn’t 100% full width.

How can I “force” this page to get the .bbPress #page class ?

Thanks

[MelindreaParticipant @melindrea 8 months ago]

My suggestion would be to just use a similar rule. Let’s say that this page has the class “page-id-2″, then amend your above CSS to look like this:

.bbpress #page,
.page-id-2 #page {
    width: 100%;
}

[Rasheed BydousiParticipant @rasheed 8 months ago]

Melindrea,
Your tip did what I need.
Thank you for your help.

[AdilAli01Participant @adilali01 7 months, 4 weeks ago]

please help me too, since i am a newbie ! i want forum width to 100% .. How to add custom CSS and how to find page id ?

• This reply was modified 7 months, 4 weeks ago by  AdilAli01.

[DramaticBabyParticipant @dramaticbaby 7 months, 3 weeks ago]

I would suggest that you read the codex on how to add custom themes, it is too much for a single forum post.

You can always begin here: Step-by-step guide to creating a custom bbPress theme

Happy coding! =)