Skip to:

Alligning Buddypress with Swatch theme

  • Hi I installed the buddy press plugin and buddy press Template pack for, however following the instructions
    I am not sure how exactly to ‘Tweak Your Layout’ accordingly – I have tried playing around with some of the code and some of the div= tags but saw no changes.

    If you can help me, here is a screenshot of one of the current buddypress pages (the groups directory) to show you what needs changing:
    As you can see it is stuck to the very left of the page, how can I float it inside so that it is more like a normal post article:
    The second issue is the sidebar, which as you can see on the BuddyPress pages only starts after the BuddyPress content whereas it should start at the top and be alongside the page content as seen in the normal post article screenshot.
    The last things I can see that needs fixing are these two problems with the buttons:
    *very bad allignment
    *almost impossible to read as white on white it seems

    If anybody can show me what code needs to be changed (If necessary I can share the theme’s code – or you can google and download the theme for free yourself) in what theme files then please help me! I’d really appreciate it! BuddyPress looks really good if these kinks can be sorted out :)

    Thanks in advance!!!

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

  • @mercime


    Open up your theme’s header.php, copy the code and paste onto, click submit and post the generated URL here. Do the same for footer.php, sidebar.php, index.php and page.php

    As for the buttons, you can use Firebug, a Firefox add-on, or use Chrome and right-click to inspect element and check button style conflict. (header.php) (footer.php) (sidebar.php) (index.php) (page.php)

    Thank you, I really appreciate you helping!!!
    And I’ve managed to fix one of the button problems, will look into the other :)



    All right.

    @BlendNZjnr You’re going to have to change 16 files contained within the 6 BP template folders transferred to your swatch theme folder in server listed here

    Download the 6 BP template folders (clean ones) to your computer HD.

    A. At the very top of all the other template files listed in link above, replace from get_header to div.padder


    with the following :
    global $woo_options;

    <div >




    B. At the very bottom of the 16 files, replace:


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


    with the following for /registration/register.php file

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


    Save files and upload following the directory structure.

    Disclaimer: this may or may not work depending on what that customized theme renders via options in the templates. If that occurs, you can point theme dev to this post and he/she would be able to direct you to a corrected structure.

    Also, if there’s a php error after this has been uploaded, it might very well be that you would have to delete the breadcrumb code I included from the original woo file. I’m saying, just in case :-)

    Finally, you might want to check out the style modifications done for Twenty Ten child theme using BP template pack

    Sorry, but where do I “Download the 6 BP template folders (clean ones)” ???
    This all looks doable, thanks so much – I just feel stupid for not knowing how to do the first step :P
    I downloaded a fresh copy of the BuddyPress Template Pack:
    And unzipped it, but that doesn’t seem to have these 6 folders or any of the files…
    could you please point me to them?
    Appreciate your replies.



    BP Template Pack process copies 6 folders from bp-default theme within the buddypress plugin folder into the active WP theme – in your case, the swatch theme folder in server.

    You can download BuddyPress, unzip, and go to bp-themes/bp-default/ folder where you’ll find the 6 folders (activity, blogs, forums, groups, members, registration) which contain the 16 files you need to revise. After you’ve done the revisions, upload those 6 folders via FTP/cpanel/etc to server wp-content/themes/swatch/ folder

    Incredible!!! Basically all the pages are realigned now, but still a couple of kinks to ion out:

    As you can see it is now within the page (not stretched to the left :D ) and the sidebar is in place, only as you can see things just stick out the right side of the page – what is the easiest way I can change the standard page width to increase it a little so everything fits?

    Also I believe I copied the code correctly for register.php (I’ll post a link to the code below)

    But it still has the same problems as before, as can be seen from this screenshot:

    What needs to be done?

    – We’re so close we can’t give up now!!! Thanks @mercime very much, you are an amazing helper!
    God Bless

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Alligning Buddypress with Swatch theme’ is closed to new replies.
Skip to toolbar