[wolverinept]

Recently installed Buddypress, everything is working fine except the fact that its pushing my sidebar below the content.
I realize this is perhaps do to theme compatibility and that i would need to change the 16 template files within the 6 BP folders.
I am not very well versed on this and i am afraid that i might do some errors while doing the changes. Could someone please explain to me how exactly to do this with the my theme?
I would be very grateful!

website: http://www.comicbooktherapy.com
header.php: http://tinypaste.com/30c9c0e2
page.php: http://tinypaste.com/87c80968

[@mercime]

Based on the HTML structure of your theme, you need to use the first option, i.e., change 16 template files within the 6 BP folders transferred to your wp-chatter theme folder in server during the compatibility process.

If you’ve previously changed any of the BP template files in your theme folder in server, replace all of them for a clean slate by deleting the 6 BP folders – /activity, /blogs, /forums, /groups, /members, and /registration – then re-run Appearance > BP Compatibility.

Download the 6 clean BP folders to your computer hard drive.

A. At the top of each of those 16 template files I linked to above, replace
`

`

with
`

<div class="post clearfix maincontent" style="margin:0;" id="post-“>

`

Then, in each of 16 files, you’d like to change the BP Templates’ page title’s header tag from `

…

` or `

..

` to `

// Titles Of Respective BP Page Templates //

`, just watch out when you do this in the /activity/index.php page.

Save files.

[@mercime]

B. At the bottom of the same 16 files, replace:
`

`

with the following (except for registration/register.php):
`

`

with the following for registration/register.php:
`

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 files.

C. Upload the 6 BP folders containing the 16 files you’ve just revised to your server wp-content/themes/wp-chatter/

D. Copy the style modifications made in BP Twenty Ten at https://codex.buddypress.org/theme-development/theme-dev-bp-template-pack-walkthrough-twenty-ten-bp-1-5/3/ and paste to your theme’s stylesheet. Adjust to taste.

[wolverinept]

Thank you very much for this! Works brilliantly!
There is only a few minor style tweaks to be made and i am trying to get them to “stick”. I have changed the theme’s stylesheet and added the style modifications made in BP Twenty Ten that you referred. Unfortunately they don’t seem to work.
You can check what i mean here – http://www.comicbooktherapy.com/members/wolverinept/
Or here – http://www.comicbooktherapy.com/members

This is the wp-Chatter stle.css – http://tinypaste.com/e0a293b7
This is the same with the referred changes – http://tinypaste.com/4cc2c1c5

Thanks in advance for an input on this!

[@mercime]

What I see first is that your site’s two-column layout (on BP and non-BP pages) has some spacing issue compared with the two column layout of the wp-chatter theme demo (edit uri) http://wp-chatter.solostreamsites.com/2009/06/how-to-install-and-set-up-wp-smooth/ I think there should either be a page template or theme option that sets page layout to two columns as seen in demo.

The Twenty Ten style mods are basic changes to that theme and you’d have to adjust styles for your specific theme. Firebug, a Firefox add-on, can help you ID which selector you need to add/change styling. For example, your theme has background images for the UL’s which the Twenty Ten theme doesn’t have. So in your case, you’d need to delete those bg imgs for the list items like so:
`ul.item-list li { background: transparent none; }`