BuddyPress.org

@jamesmcbennett I looked at your members and forums directory and looks like something went awry with your HTML structure since last time you posted at the forums.

With regards to your question, add the following to your theme’s stylesheet:
`div#subnav.item-list-tabs {
margin: -15px 0 15px !important;
}`

@thesurfinstitute Following is the simplest way to make your theme compatible:

If you’ve changed any of the BP template files in your theme folder, replace all of them for a clean slate by deleting the 6 BP folders in server – /activity, /blogs, /forums, /groups, /members, and /registration – then re-run Appearance > BP Compatibility. (make sure Sliding Door Child theme is activated before you run this)

A. Copy your theme’s header.php and Save As > header-buddypress.php

Open up header-buddypress.php and at the bottom of the file, below all other code, add this:
`

`

Save file.

C. Upload header-buddypress.php and sidebar-buddypress.php to wp-content/themes/sliding-door-child/

D. Style modifications for BP templates – you might want to use some or all of styles listed in this page https://codex.buddypress.org/theme-development/theme-dev-bp-template-pack-walkthrough-twenty-ten-bp-1-5/3/

Widget title alignment is corrected and updated in my previous post. Found out the conflicting style is inline and so we need to add the !important in stylesheet.

@roxanne-bland not right. Go to dashboard menu, Plugins > Add New and enter “bp template pack” in keyword and click on “install” button in pop-up.

@BlinkyBill01 you don’t need to add a break tag. Instead, you could make all buttons line up horizontally or vertically via adding styles to your buttons in your theme’s stylesheet. You can use Firebug, a Firefox add-on, to check what selector you’d need to style the buttons.

Add the following in your stylesheet
`#primary .widget-title {
text-align: left !important;
}`
[Updated: 03-04-12]

@neodoxa first thing, we have to remove the default image background and default left padding, etc. in your theme by adding following to your stylesheet:
`div#item-nav ul,
div#item-body ul {
padding-left: 0;
}
div#item-nav ul li,
div#item-body ul li {
background: transparent none;
}`

You should install Firebug, a Firefox add-on, to help you identify and correct styles

B. Copy your theme’s sidebar.php and Save As > sidebar-buddypress.php

Open up sidebar-buddypress.php and at the top of the file, above all other code, add this:
`

jQuery(document).ready( function() {
if ( jQuery(‘div#blog-details’).length && !jQuery(‘div#blog-details’).hasClass(‘show’) )
jQuery(‘div#blog-details’).toggle();
jQuery( ‘input#signup_with_blog’ ).click( function() {
jQuery(‘div#blog-details’).fadeOut().toggle();
});
});

`

Save file.

C. Upload header-buddypress.php and sidebar-buddypress.php to wp-content/themes/wpflexishop/

D. Style modifications for BP templates – you might want to use some or all of styles listed in this page https://codex.buddypress.org/theme-development/theme-dev-bp-template-pack-walkthrough-twenty-ten-bp-1-5/3/

Sidenote: Looks like there’s a missing `` after “ in your sidebar.php per your pastebin.com post. Copy and paste typo?

== A bunch of the buddypress pages are “Page Not Found”… ==

Re-run Settings > Permalinks and choose permalink other than default.

You add the style modifications at the bottom of your boulevard theme’s stylesheet

No need to insert block/folder inside the duotive3 theme. That’s what the BP Template Pack is for.

What I see in your second screenshot is that the UL list styles are showing and the layout is not being contained within the div. The style modifications I linked to should be placed at the bottom of other styles in your stylesheet.

For example, the UL list styles should be preceded by UL no list styles because of the following BP Twenty Ten style modifications I linked to above:
`div#item-header ul {
list-style-type: none;
}

ul.item-list {
list-style-type: none;
margin-left: 0;
}

ul#members-list,
ul#groups-list {
list-style-type: none;
margin-left: 0;
}`

Since your site is not live, I can’t troubleshoot what’s going on directly. Use Firebug, a Firefox add-on, to see what’s overriding the modifications you’ve made or us Google Chrome and right click to Inspect Element.

Why do you have the code to BP’s members/index.php as the index.php of your theme in pastebin.com? I suggest you re-upload your boulevard theme files again, just in case.

If you’ve tried to revise the BP template files transferred to your boulevard theme folder during the compatibility process, I suggest you delete those 6 folders from your theme folder. Then re-run Appearance > BP Compatibility again just to make sure you have clean template files.

Looks like you only need to create two files and upload it to your boulevard theme folder in server.

A. Copy header.php and Save As > header-buddypress.php.

Open up header-buddypress.php and at the bottom of the file, below all other code, add this:
`

`

At the bottom of the same file, below all other code, add this:
`

jQuery(document).ready( function() {
if ( jQuery(‘div#blog-details’).length && !jQuery(‘div#blog-details’).hasClass(‘show’) )
jQuery(‘div#blog-details’).toggle();
jQuery( ‘input#signup_with_blog’ ).click( function() {
jQuery(‘div#blog-details’).fadeOut().toggle();
});
});

`

Save file.

C. Upload header-buddypress.php and sidebar-buddypress.php to wp-content/themes/boulevard

D. Style modifications for BP templates – you might want to use some or all of styles listed in this page https://codex.buddypress.org/theme-development/theme-dev-bp-template-pack-walkthrough-twenty-ten-bp-1-5/3/

B. Copy sidebar.php and Save As sidebar-buddypress.php

Open up sidebar-buddypress.php and at the top, above all code contained within, add this
`
`

Then at the bottom, below all other code, add this:
`

jQuery(document).ready( function() {
if ( jQuery(‘div#blog-details’).length && !jQuery(‘div#blog-details’).hasClass(‘show’) )
jQuery(‘div#blog-details’).toggle();
jQuery( ‘input#signup_with_blog’ ).click( function() {
jQuery(‘div#blog-details’).fadeOut().toggle();
});
});

`
[ @erica34 – updated code above to add script required]

Save file.

C. Upload header-buddypress.php and sidebar-buddypress.php to your theme folder in server wp-content/themes/evolution/ at the same directory where your regular header.php and sidebar.php are in

Final note: Copy over the stylesheet modifications to contain some BP elements to your theme’s stylesheet https://codex.buddypress.org/theme-development/theme-dev-bp-template-pack-walkthrough-twenty-ten-bp-1-5/3/ then adjust as needed.

Are you using the BuddyPress Template Pack plugin? (https://wordpress.org/extend/plugins/bp-template-pack/) I used that and followed the procedure for adding BP compatibility to my theme that the plugin provides.

You’re welcome.

== only thing missing is the background image ==
That is because the body class .custom-background where your black background is added to is not automatically generated in the BuddyPress template files. If you are set in what your style is, you could copy over the body.custom-background styles to body { }

== If I got rid of the sidebar for a full width view, would it break? ==
Check if the theme has a full-width template file and make the changes in header-buddypress.php and sidebar-buddypress.php per structure.

Sorry to disappoint you, but no genius here

#2) I recall that issue. Add this to your theme’s stylesheet:
`#whats-new-options {
height: 30px;
}`
increase height as needed.

== What would that do? I just did it and I see no change. ==
The recommendation to upload another copy of page.php was due to the fact that the div class in pastebin.com for page.php was different from the div class I posted which resolved the layout issue.

== Shouldn’t there be a button to send public messages ==
Make sure you did not disable the JS for BP. Go to Appearance > BP Compatibilty. The checkboxes should be clear. i.e. unchecked.

== And when I try to change the colors on the navbar to match my theme color… it doesnt change them. ==
Whatever change you add to your theme’s stylesheet should override adminbar’s styles as the latter is enqueued before your theme’s stylesheet per code you posted for header.php in pastebin. It just might be that you have overlooked some/same selectors to override adminbar styles.

Looking at the code you posted, I am 99% positive that you only need to create and add header-buddypress.php and sidebar-buddypress.php to your theme folder instead of changing code in 16 files transferred into your reaction theme in server. Let’s give it a try.

Create the header-buddypress.php file. Copy content of your reaction theme’s header.php and post it in header-buddypress.php and add the following at the bottom of that file:
`

`

Save file.

Upload both files to your theme folder in wp-content/themes/reaction/

Finally, you might want to modify the default template pack styles, check out https://codex.buddypress.org/theme-development/theme-dev-bp-template-pack-walkthrough-twenty-ten-bp-1-5/3/

Open up you 13thfloor theme’s header.php and Save As > header-buddypress.php in the same theme folder. Open up header-buddypress.php and at the very bottom of the file, below other code, add:
`

`
Save and upload to theme folder in server in same level as sidebar.php file

You have to add the following to your 13thfloor’s stylesheet:
`#content div.padder {
float: left;
width: 560px;
}`
the above will take the place of #content-area which is not available in BP template files.

Furthermore, you might want to modify the styles included in BP Template Pack, check out the mods used in this page https://codex.buddypress.org/theme-development/theme-dev-bp-template-pack-walkthrough-twenty-ten-bp-1-5/3/

Looking at the current HTML structure of your Members, Groups and other BP template files, each is missing some original theme divs which add background color and padding. You removed the div.padder container from BP templates and then added a new div#bp-block around the item-list-tabs to try to contain it.

Recommend the following:

1.Add back the opening div.padder and closing div per original BP template files

2. Remove the #bp-block container div you surrounded div.item-list-tabs with

3. Add the following to your stylesheet to compensate for the missing divs
`/* BuddyPress Mods */
#content div.padder {
background: #eee none;
border: 1px solid #ccc;
clear:both;
font-size: 9pt;
margin: 0 0 10px;
padding: 15px;
}`

4. Use the BP style modifications used in Twenty Ten Child theme for BuddyPress https://codex.buddypress.org/theme-development/theme-dev-bp-template-pack-walkthrough-twenty-ten-bp-1-5/3/

5. Adjust style to taste.

That will change the background of the header. Was their something else you wanted to change via CSS?

Everything else is practically the same concept, for example removing the header logo, you will want to ad “div#header h1 { display:none; }” ect. ect.

What exactly do you want to change? (you will need to be clear as their are alot of divs and other elements that make up the header)

See the codex on Child Theme’s and Stylesheets regarding where to add it. You will want to implement it into your child theme’s stylesheet. https://codex.buddypress.org/theme-development/building-a-buddypress-child-theme/

You should build a child theme for bp-default so your customizations won’t be overwritten when you upgrade BuddyPress https://codex.buddypress.org/theme-development/building-a-buddypress-child-theme/

You’d add the new styles In your child theme’s stylesheet. If you need assistance, site url?

It’s documented in functions code.
– Build a child theme of bp-default theme https://codex.buddypress.org/theme-development/building-a-buddypress-child-theme/
– To change header height/width, create a functions.php in child theme folder and apply filters per https://buddypress.trac.wordpress.org/browser/tags/1.5.2/bp-themes/bp-default/functions.php#L91
– To change `#header h1`, in same child theme’s functions.php you’ll override parent theme’s function (lines 213 to 270) at https://buddypress.trac.wordpress.org/browser/tags/1.5.2/bp-themes/bp-default/functions.php with:
`function bp_dtheme_admin_header_style() {
?>

// add/revise styles you see in file

<?php
}`

@TitanT30 You’re welcome. I can see where we need to adjust – the trade-off for creating 2 files instead of changing 16 files for BP compatibility

I just added `background: #ffffff;` and `width: 800px;` to the code posted above. You need to add that at the bottom of your stylesheet, style.css file

If you’ve revised any of the template files within the 6 BP folders transferred to your ubuntu theme folder during the compatibility process, then you have to delete those 6 BP folders within wp-content/themes/ubuntu/ and re-run Appearance > BP compatibility again to get fresh new folders.

The following instruction involves creating two files and uploading to your wp-content/themes/ubuntu as well as adding necessary styles then other recommended styles.

1. Open up your theme’s header.php file with text editor and Save As > header-buddypress.php
2. Open up header-buddypress.php and add the following at the very BOTTOM of the file:
`

`
5. Save and upload to wp-content/themes/ubuntu/ folder

6. Open up your theme’s style.css and you must add the following at bottom of file:
`/* My BuddyPress styles */
body.activate #content,
body.activity #content,
body.blogs #content,
body.friends #content,
body.forums #content,
body.groups #content,
body.members #content,
body.messages #content,
body.profile #content,
body.register #content,
body.registration #content,
body.xprofile #content {
background: #ffffff;
padding: 20px;
width: 800px;
}`
7. Save and upload to folder
8. Note: other styles you might want to add after the above styles to remove UL list-styles or tweak some element widths, as needed per assistance with other themes are found in this page https://codex.buddypress.org/theme-development/theme-dev-bp-template-pack-walkthrough-twenty-ten-bp-1-5/3/