Group Mods

  • Profile picture of r-a-y
  • Profile picture of @mercime
  • Profile picture of Hugo

Support: Installing BuddyPress

Problems with getting it running.

Alligning Buddypress with Swatch theme (8 posts)

Started 3 months, 3 weeks ago by: BlendNZjnr

  • Profile picture of BlendNZjnr BlendNZjnr said 3 months, 3 weeks 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!!!

  • Profile picture of @mercime @mercime said 3 months, 3 weeks 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.

  • Profile picture of BlendNZjnr BlendNZjnr said 3 months, 3 weeks 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 :)

  • Profile picture of @mercime @mercime said 3 months, 3 weeks 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 http://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.

    <?php get_header( 'buddypress' ); ?>
    	 <?php do_action( 'bp_before_directory_blogs_page' ); ?>
     	 <div id="content">
             <div class="padder">

    with the following :

    <?php
            get_header();
            global $woo_options;
    ?>
    	<div id="content" class="page col-full">
    		<div id="main" class="col-left">
                    <?php if ( $woo_options['woo_breadcrumbs_show'] == 'true' ) { ?>
    			<div id="breadcrumbs">
                            	<?php woo_breadcrumbs(); ?>
    			</div><!--/#breadcrumbs -->
                    <?php } ?>
     			<div <?php post_class('drop-shadow lifted'); ?>>
    				<div class="entry">
  • Profile picture of @mercime @mercime said 3 months, 3 weeks ago:

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

    </div><!-- .padder -->
    </div><!-- #content -->
    <?php do_action( 'bp_after_directory_blogs_page' ); ?>
    <?php get_sidebar( 'buddypress' ); ?>
    <?php get_footer( 'buddypress' ); ?>

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

    </div><!-- /.entry -->
    </div><!-- /.post -->
    </div><!-- /#main -->
    <?php get_sidebar(); ?>
    </div><!-- /#content -->
    <?php get_footer(); ?>

    with the following for /registration/register.php file

    </div><!-- /.entry -->
    </div><!-- /.post -->
    </div><!-- /#main -->
    <?php get_sidebar(); ?>
    </div><!-- /#content -->
    	<script type="text/javascript">
    		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();
    			});
    		});
    	</script>
    <?php get_footer(); ?>

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

  • Profile picture of BlendNZjnr BlendNZjnr said 3 months, 3 weeks 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:

    http://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.

  • Profile picture of @mercime @mercime said 3 months, 3 weeks 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

  • Profile picture of BlendNZjnr BlendNZjnr said 3 months, 3 weeks 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