Skip to:
Content
Pages
Categories
Search
Top
Bottom

Alligning Buddypress with Swatch theme

  • @blendnzjnr

    Member

    12 years, 11 months ago

    Hi I installed the buddy press plugin and buddy press Template pack for, however following the instructions
    (http://codex.buddypress.org/theme-development/wordpress-to-buddypress-theme/)
    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:
    http://blendnz.com/BP%20help.png
    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: http://blendnz.com/BP%20help%20normal.png
    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:
    http://blendnz.com/BPhelp_buttons.png
    *very bad allignment
    http://blendnz.com/BP_buttons_2.png
    *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

    Participant

    12 years, 11 months ago

    Open up your theme’s header.php, copy the code and paste onto pastebin.com, 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.

    @blendnzjnr

    Member

    12 years, 11 months ago

    http://pastebin.com/69imGjt4 (header.php)
    http://pastebin.com/ATQBREyP (footer.php)
    http://pastebin.com/nrQnxNwJ (sidebar.php)
    http://pastebin.com/BKYJTTLZ (index.php)
    http://pastebin.com/1mZQ18gC (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 :)

    @mercime

    Participant

    12 years, 11 months ago

    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 https://codex.buddypress.org/theme-development/wordpress-to-buddypress-theme/#tplfiles

    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
    e.g.
    `

    `

    with the following :
    `<?php
    get_header();
    global $woo_options;
    ?>

    <div >

    `

    @mercime

    Participant

    12 years, 11 months ago

    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(‘div#blog-details’).toggle();
    jQuery( ‘input#signup_with_blog’ ).click( function() {
    jQuery(‘div#blog-details’).fadeOut().toggle();
    });
    });

    `

    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 https://codex.buddypress.org/theme-development/theme-dev-bp-template-pack-walkthrough-twenty-ten-bp-1-5/3/

    @blendnzjnr

    Member

    12 years, 11 months ago

    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:
    https://wordpress.org/extend/plugins/bp-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.

    @mercime

    Participant

    12 years, 11 months ago

    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

    @blendnzjnr

    Member

    12 years, 11 months ago

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

    http://edit.blendnz.com/wp-content/uploads/2012/01/new-groups-layout.png

    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)

    http://pastebin.com/YJTHCh8j

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

    http://edit.blendnz.com/wp-content/uploads/2012/01/register.png

    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.

Topic Info

Topic Tags

Skip to toolbar