Topic: [Resolved] BP 1.8.1 & full-width layout FAQ not working

[Resolved] BP 1.8.1 & full-width layout FAQ not working – Oxygen theme

resistoyen
Participant

@resistoyen

11 years, 2 months ago

Hello, i’ve spend like 4 hours by now to try to get my BP working with full-width template on oxygene 0.5 theme.
Unfortunatly, i’m still on local server so i can’t give an adress.

I followed the procedure described here at the end : http://codex.buddypress.org/theme-development/theme-compatibility-1-7/bp-17-upgrading-template-packed-themes/

I’ve tryed it both in default theme & child theme.
Strangely, i got a but with child-theme on previous installation loosing default template of oxygen but getting the full-with template working !! I thought it would work by reinstalling but it didn’t.

What i did,

I created a buddypress.php by copying the code tooked from the page-template-fullwidth.php.
It didn’t worked so i tryed to create a bbpress.php with same code (thought i didn’t installed bbpress yet). Didn’t worked too…

Here’s the code of these files:

[EDIT- please post large blocks of code at pastebin.com
~~ mercime]

Would be amazing to get it work. It’ for a non profit organization & we have no money :'(
Thx a lot for any help.

Viewing 8 replies - 1 through 8 (of 8 total)

resistoyen
Participant

@resistoyen

11 years, 2 months ago

Sorry i forgot to say i’m on wordpress 3.6.1.

@mercime
Participant

@mercime

11 years, 2 months ago

@resistoyen could you be more specific about what exactly didn’t work? Layout broken? Content not showing up? etc?

resistoyen
Participant

@resistoyen

11 years, 2 months ago

Oh sorry sure, thanks for the fast reply, my problem is that the page don’t want to show up with full-width as in the screenshorts here.

resistoyen
Participant

@resistoyen

11 years, 2 months ago

@mercime just noticed that useful twitter-kind thing to let you know i replyed.
@mercime
Participant

@mercime

11 years, 2 months ago
I created a buddypress.php by copying the code tooked from the page-template-fullwidth.php. It didn’t work

@resistoyen sometimes it doesn’t work right away. To continue, using this page as reference:
https://themes.trac.wordpress.org/browser/oxygen/0.5/page-template-fullwidth.php?rev=24186

a) Remove the following from your buddypress.php file
Line 3: Template Name: Full Width
Line 13-17: <div class="aside"> to closing </div>

b) Change Line 21 from
<div class="content-wrap">
to
<div class="content-wrap bp-full-width">

c) Add this to your theme’s stylesheet
```
.bp-full-width {
width: 100% !important; 
}
```
resistoyen
Participant

@resistoyen

11 years, 2 months ago
@mercime

Thx a lot for you help here. There is some change but it’s not working yet.
Though, this is encouraging as it have now an effect, but not the good one.

Here’s the screenshots of 2 tests

The code of my style.css of child theme
```
/* Theme Name: Oxygen Child Theme
Author: Self-Help WordPress User
Template: oxygen */
@import url("../oxygen/style.css");

.bp-full-width {
width: 100% !important;  }
```
The effect is different: the bar go to left just under the main menu, which is the right place where it should be ! But the bar remains too little. I got the same effect with a 940 px width, which is the normal px of the full-width of oxygene.

Then i tryed to put 1500 px, or 200% to see if the bar go longer :

I searched for like one hour or two by now on google to find the right thing & still trying. I also tryed on main theme, changing the stylesheet. Same effect.

Here’s the codes of all this documents.

buddypress.php : http://pastebin.com/xs8BUN14

Again, thanks for your help
resistoyen
Participant

@resistoyen

11 years, 2 months ago
@mercime

Thanks you a lot, apparently i solve the problem now by changing more the style.css of the child theme.

Here’s the working code of style.css but it needs the change of buddypress.php that @mercime gave us previously. The code may not be perfect as i copyed what i found on the net + i added a code that is present in the main style.css of oxygen theme, which refers to the full-width layout.
```
/*
Theme Name: Oxygen Child Theme
Author: Self-Help WordPress User
Template: oxygen
*/

@import url("../oxygen/style.css");
#tertiary {
display: none;
}
#content {
margin-right: 0 !important;
}
.bp-full-width {
width: 100% !important; 
}

.bp-full-width #content { width: 100%; }
.content-wrap {
	float: right;
	width: 79.78723404255319%;	/* 750 / 940 = 0.79787234042553 */
}
.bp-full-width{ width: 100%; }
#content {
	float: left;
	width: 62.66666666666667%;	/* 470 / 750 = 0.6266666666666667 */
	margin: 0 0 30px 0;
}
.aside {
	float: left;
	width: 17.02127659574468%;	/* 160 / 940 = 0.1702127659574468 */	
}
#sidebar-primary {
	float: left;
	width: 100%;	/* 160 / 940 = 0.1702127659574468 */
}
#sidebar-secondary {
	float: right;
	width: 33.33333333333333%;	/* 250 / 750 = 0.3333333333333333 */
}
```
Thanks again @mercime !!
@mercime
Participant

@mercime

11 years, 2 months ago

@resistoyen Glad you resolved the issue and thank you for posting your solution here 🙂
Marking this topic as resolved.