Code Warrior

Battles Treasures of doing battle with code…aka software tidbits to help you.

• Home
• About

Dynamic Endeavors LLC’s Rapid Web 2.0 Customization of the default Buddypress theme

Hi,

This writeup is intended for Buddypress theme designers who want to fast track development a Buddypress theme. The methods used here can easily be applied to other themes as well. But the focus is on Buddypress. It is our hope that our methods will help others make even better themes. The sky is the limit. But we’re sure that with such little code/css you can get awesome results:) We’ll show you how to go from the default Buddypress theme as seen here:

To look like this here:

We here at DynamicEndeavors use Wordpress and Buddypress all the time and add a lot of custom style and code to them.  Often our past approaches to making modifications would break when a new release of a Buddypress theme would come out.  We got tired of that.  We also wanted to easily add Web 2.0 effects with our themes.  So using the latest Wordpress MU and Buddypress releases we went about a way in which we could modify an existing theme and not have to modify the theme directly. The idea is to make a custom css and custom php/javascript file that we can add to a new drop of a Buddypress theme at will.

How?

We make an entry at the bottom of:

themes/bp-default/style.css :

@import url( _inc/css/custom.css );

Well, we make a custom.css in:

themes/bp-default/_inc/css/custom.css – All we have in there is this line

@import url( ../../../bp-sn-parent/_inc/css/custom.css );

and:

themes/bp-sn-parent/_inc/css/custom.css.

This takes care of our css requirements.  Now we want a way to add php and javascript.  We use jQuery
manipulation calls to modify the default theme content as we want.  We also use nifty2 to apply rounded
corners (without images!) to divs we want to change.   We make one addition to footer.php in the theme. Just above  wp_footer():

<?php include "custom.php"; ?>

<?php wp_footer(); ?>

What’s in custom php is stuff like this:

<?php
function roundedJs()
{
    echo "<script type='text/javascript' src='".  get_template_directory_uri() ."/js/nifty.js'></script>";
}
roundedJs();
?>
<script type="text/javascript">
jQuery(document).ready(function() {

    jQuery("div#search-login-bar").wrap('<div id="search-login-bar-outter" sytle="float:none"></div>');
    jQuery("div#wp-admin-bar").wrap('<div id="wp-admin-bar-outter" sytle="float:none;"></div>');
    jQuery("div#wp-admin-bar-outter").append('<div id="wp-admin-bar-outter-bottom" sytle="float:none;"></div>');
    jQuery("div#footer").append('<p>Copyright <a href="http://dynamicendeavorsllc.com">Dynamic Endeavors LLC</a> <?php echo date("Y"); ?> &copy</p>');

    jQuery("div#search-login-bar-outter").before('<div id="body-logo"><img src="<?php echo get_template_directory_uri() . '/images-custom/ag_logo.gif' ?>"/></div>');

    if(!NiftyCheck())
        return;
    Rounded("div#search-login-bar-outter","#fff","#000");
    Rounded("div#footer","#fff","#000");
    RoundedTop("div#wp-admin-bar-outter","#fff","#000");
    RoundedBottom("div#wp-admin-bar-outter-bottom","#fff","#000");
    /* Rounded("#nav#li","#fff","21759B"); */
});
</script>

What’s in our custom.css is this:

/* Here's the member area custom css file */

/* Here's the css for just rounding corners with nifty.js */
.rtop, .rbottom{display:block !important;}
.rtop *, .rbottom *{display: block !important; height: 1px !important; overflow: hidden !important;}
.r1{margin: 0 5px !important;}
.r2{margin: 0 3px !important;}
.r3{margin: 0 2px !important}
.r4{margin: 0 1px !important; height: 2px !important;}

#header {
	background-color:#fff;

    height:40px;

}

#search-login-bar-outter {
    border-top: 20px solid #fff;

}

#search-login-bar {
    border-top: 5px solid #000;
    background:#000 none repeat scroll 0 0;
   }

#search-login-bar #search-form {
    float:left;

}
#logo {
    display: none;

}

a {
    color: #006699;
}

#header ul#nav {

    float:none;
    margin:10px 10px 10px 0;

}

#header ul li.selected a {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#000 none repeat scroll 0 0;
color:#fff;
font-weight:bold;

}

#header ul li a {
color:#006699;

}

body {
margin-left: 150px;
margin-right: 150px;

}

#footer {
    padding: 0px;
    background: #000 none repeat;
    height: 79px;
}

#search-form {
}

#logout-link {
}

#wp-admin-bar {
    position: relative;
    background: #000 none repeat !important;
    z-index: 0 !important;
    height: 30px !important;
    color: #000 !important;
}

#wp-admin-bar-outter {
    background: #000 none repeat !important;
    width: 92%;
    left: 50px;
    position: absolute;
    top: 10px;
    z-index: 1001;
}

#header ul li {
float:left;
background-color:#fff;
margin:0 0 0 5px;

}

#header ul li.selected a {
				background: #006699;
				color: #fff;
				font-weight: bold;
			}

			ul#letter-list li a:hover {
			font-weight: bold;
			background: #006699;
			color: #fff;
		}

.directory h3, .directory #sidebar h3 {

background:none;
font-weight:bold;
height:28px;
margin-bottom:3px;
padding:5px 8px 0;

}

.directory #sidebar h3 {
background-image:none;
color:#006699;

}

div.bp-widget h4 {
background:none;
color:#006699;

}

#search-login-bar-outter {
border-top:5px solid #FFFFFF;
}

#body-logo {
	margin-top: 25px;
}

.internal-page #content img.avatar {
border:4px solid #C3D9FF;

}

The entire theme and add ons can be downloaded here Dynamic Endeavors LLC bp-themes Web 2.0 techniques.

Please let us know if you liked the tutorial and we’d love to see your version of a site so please drop a line in the comment section.

Enjoy

Dave

November 20, 2009   Tags: 2.0, buddypress, cornders, css, developement, javascript, jquery, nifty, rapid, technique, Theme, web  Posted in: Theme, Uncategorized, buddypress  No Comments

Buddypress Multimedia Plugin

Hello,

I know, I know everyone who reads this must be going c’mon another plugin?  Can’t we have this or that feature on the other plugins first?  I wish I could add features to all of them, but truth is I can’t all at once.  But I think you’ll like this idea.  I’ve seen the excellent album plugin and wanted to take it a step further.  I wanted images, songs and videos on my site.  I’m also toying with the idea of doing ffmpeg and do runtime encoding of large avi, mov, mpegs and converting them to flv so that Buddypress could in effect make a youtube site if you wanted.  Anyway, on to what I made.

This plugin is built on top of a couple of cool open source projects.  One is multibox, a way to display multiple media in one frame.  It can display, video, songs and images and has a nice user interface to cycle.  The other issue I have is not being able to upload many media files at once and have a progress bar as these files can be large in nature.  Well, now I can with jquery-swfupload.  It is a slick way to upload many files with a progress bar at once.  Now, here’s the first working copy via images for you to view.  I’m not sure of the demand on this plugin, but I need it for my Anygig.com rewrite.  Well, without much further ado here’s the plugin in it’s raw form.  I plan on adding some rounded corners and perhaps separate out the media in to sections, but you get the feel for it already with these:

November 18, 2009   Tags: bar, buddypress, images, jquery, multibox, MultiMedia, player, plugin, progress, songs, swfupload, videos  Posted in: MultiMedia, Plugins, buddypress  6 Comments

• « Older Entries

• 

• Subscriber Count

  1014

• Top Commentators

  • Ray (27)
  • Scot (25)
  • Bento (24)
  • Roy (14)
  • alunsina (14)
  • Kyle (8)
  • rayray (8)
  • Karl Cossio (7)
  • Daniel Black (7)
  • Jimmy (6)

• Recent Comments

  • daveaubin on Buddypress Multimedia Plugin
  • Frank on Buddypress Multimedia Plugin
  • daveaubin on Buddypress Multimedia Plugin
  • rayray on Buddypress Multimedia Plugin
  • daveaubin on Buddypress Multimedia Plugin