In the last part of this series, I walked you through the BuddyPress theme API and loops. We finished up by creating a child theme that weÕll reuse today in the next part of our series. It was my hope that the framework laid in the last tutorial will make elaborating on our child theme that much easier. This part of the tutorial will focus on creating a new overall look for our BuddyPress site and creating a custom home page. So, letÕs open up our theme folder and get our hands dirty in some code.
This tutorial will lay the groundwork for part 3, where we will focus on forums, blogs, and the overall user experience of your new BuddyPress child theme. For now, letÕs start with looking at how to changing the look and feel of a child theme using CSS.
What We Will Do
By the end of this tutorial, you should be able to:
- customize the overall look of a BuddyPress child theme with CSS
- create a custom.php to overwrite the default BuddyPress themeÕs functionality
- create a custom home page for your theme
- integrate loops into your custom pages
Creating a Custom Home Page
In this tutorial, we want to take the generic BuddyPress index page, and create an inviting home page that highlights many areas of our site and creates an overall style anchor for the site. So, in short, we want to go from this:
to this:
Step 1 Create a home.php Template File
Before we start digging into our stylesheet, take the index.php file in your child theme and duplicate it. Now, rename that file home.php. Voila! You have a page that will always load as your home page.
If you are familiar with WordPress theming, you will notice that this process is exactly the same as in WordPress.
Step 2 Start with the Stylesheet
In the last part of this series, youÕll remember that we made a new child theme by creating a folder named cool_bp_theme (or whatever you decided to name it) and placing that folder into our siteÕs wp-contents/themes folder. From there, we created a new style.css file and made sure to import this:
/* Inherit the default theme styles */ @import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/default.css ); /* Inherit the default theme adminbar styles */ @import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css );
Now we want to edit our CSS further to make the child theme our own in terms of design and layout. LetÕs examine how to get from the default BuddyPress theme to there. To do that, we need to:
- Find the elements that we want to change. I use Firebug to quickly find page elements and their styles.
- Add the element to your style.css file.
- Change the CSS to your style.
Any element that we put into our child theme style.css file will overwrite style settings elsewhere. However, copy the element name exactly or it will not change.
Step 3 Customizing the Background
So, starting with the basics, let's change the background of our body and other elements. If you have Firebug, right-click (control-click) the background and select inspect element. If you don't have Firebug, or you prefer to work directly with the CSS, navigate to: your WP folder/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/css/default.css.
Remember that you always want to edit the CSS file located in your child theme, as any edits made in the bp-default theme folder will be overwritten during an upgrade.
The default body styling looks like this :
body {
background: #eaeaea url( ../images/background.gif ) top left repeat-x;
font-size: 12px;
font-family: Arial, Tahoma, Verdana, sans-serif;
line-height: 170%;
color: #555;
width: 90%;
min-width: 960px;
max-width: 1250px;
margin: 0 auto;
padding-top: 0 !important; /* Remove the top padding space for the admin bar in this theme */
}
This results in our basic default styling. We want to change that, so we need to add the following to our child theme stylesheet:
body {
background: #eaeaea url(images/cool_bp_theme_bg.jpg) top left repeat;
padding-top:20px;
}
Now, if you look at the home page, it should look like this:
All that is left to do is to modify the container element, which by default is:
div#container {
position: relative;
width: 100%;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
background: #fff;
overflow: hidden;
}
We want to change the background to transparent and remove the border elements.
div#container {
position: relative;
width: 100%;
padding:10px;
border:none;
background: transparent;
overflow: hidden;
font-size:12px;
}
The background now looks like we want it to, and we can turn to editing the rest of the page.
Step 4 Customizing the Header Elements
Since the background is where we want it, let's turn our attention to the header. By default, the theme allows for a custom header, which is set in the admin dashboard via Appearance => Header. There is a function to turn that off listed in the BuddyPress codex, but for now just go there and remove the header image. We want to replace it with a custom logo image via simply replacing line 44 in our header.php :
<h1 id="logo"><a href="<?php echo site_url() ?>" title="<?php _e( 'Home', 'buddypress' ) ?>"><?php bp_site_name() ?></a></h1>
with
<img id="logo" src="<?php bloginfo('stylesheet_directory'); ?>/images/hills_logo.png" alt="<?php bp_site_name() ?>" />
This will add the logo image we want. Notice the logo id, which I added to style.css. That simply floats it to the right. For the navigation, I kept the custom menu that I have described in earlier tutorials, and I styled it like this :
#navigation ul {
float:right;
}
#navigation ul li {
list-style:none;
float:left;
margin-left:15px;
margin-top:100px;
font-size:22px;
color:#404040;
}
Step 5 Customizing the Content Elements
Notice the custom image and text that I put in the top of the home page:
To get that, after <div class="padder"> on line 5 of home.php (remember, the one you created from a copy of index.php?), insert:
<div id="featured_content"> <img id="featured_photo" src="<?php bloginfo(Ôstylesheet_directoryÕ);?>/images/the_hills.png" alt="<?php bp_site_name() ?>" /> <p id="intro_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt. </p> </div>
You'll notice that I created a new div with the following styles:
#featured_content {
width:100%;
margin:20px auto;
}
#featured_image {
float:left;
width:511px;
}
#intro_text {
width:420px;
float:right;
text-align:justify;
font-size:24px;
line-height:.5em;
word-break:normal;
}
In this box, you could always put a slider or other premium content, but I kept it simple for this tutorial.
One important thing to note, when including images and scripts, be sure to use <?php bloginfo(Ôstylesheet_directoryÕ);?>.
Moving down, I edited the latest posts to only display the three latest posts by adding:
<?php query_posts('posts_per_page=3'); ?>
right above our post loop that starts with:
<?php if ( have_posts()) : ?>
To display five members below the most recent posts, I added a custom members loop, which looks like:
<?php if ( bp_has_members('per_page=5') ) : ?>
<div class="pagination">
<div class="pag-count" id="member-dir-count">
<?php bp_members_pagination_count() ?>
</div>
<div class="pagination-links" id="member-dir-pag">
<?php bp_members_pagination_links() ?>
</div>
</div>
<?php do_action( 'bp_before_directory_members_list' ) ?>
<ul id="members-list" class="item-list">
<?php while ( bp_members() ) : bp_the_member(); ?>
<li>
<div class="item-avatar">
<a href="<?php bp_member_permalink() ?>"><?php bp_member_avatar() ?></a>
</div>
<div class="item">
<div class="item-title">
<a href="<?php bp_member_permalink() ?>"><?php bp_member_name() ?></a>
<?php if ( bp_get_member_latest_update() ) : ?>
<span class="update"> - <?php bp_member_latest_update( 'length=10' ) ?></span>
<?php endif; ?>
</div>
<div class="item-meta"><span class="activity"><?php bp_member_last_active() ?></span></div>
<?php do_action( 'bp_directory_members_item' ) ?>
<?php
/***
* If you want to show specific profile fields here you can,
* but it'll add an extra query for each member in the loop
* (only one regardless of the number of fields you show):
*
* bp_member_profile_data( 'field=the field name' );
*/
?>
</div>
<div class="action">
<?php do_action( 'bp_directory_members_actions' ) ?>
</div>
<div class="clear"></div>
</li>
<?php endwhile; ?>
</ul>
<?php do_action( 'bp_after_directory_members_list' ) ?>
<?php bp_member_hidden_fields() ?>
<?php else: ?>
<div id="message" class="info">
<p><?php _e( "Sorry, no members were found.", 'buddypress' ) ?></p>
</div>
<?php endif; ?>
From the last tutorial, you could also modify that loop more to reveal only specific users or to display different user information. This could be helpful to display site authors or other site-specific info. For the members display, I left the background white, but here is the CSS for those elements if you want to change them:
div.post div.author-box, div.comment-avatar-box {
background: #FFFFFF;
padding: 10px;
float: left;
margin: 0 15px 15px 0;
font-family: georgia, times, serif;
font-style: italic;
text-align: center;
width: 70px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
div.post div.author-box img, div.comment-avatar-box img {
float: none;
border: 4px solid #666666;
margin: 0;
}
Step 6 Customizing the Sidebar Elements
For the sidebar, I kept it simple, since the default is already dynamic and I can use that to add content as needed. I simply edited the CSS, which by default has different padding than I wanted. Here is the code as I edited it:
div#sidebar {
float: left;
width: 224px;
margin-left: -226px;
margin-top: 30px;
border-left: 1px solid #DDD;
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
background: url(../images/sidebar_back.gif) top left repeat-x;
border-top-right-radius: 3px 3px;
}
ul.item-list li {
border-bottom: 1px solid #EAEAEA;
background:#FFFFFF;
padding: 15px 0;
margin: -5px -20px 0 -19px;
position: relative;
}
div.item {
background:#FFFFFF;
}
And for the pesky orange box that displays when the lastest activity happened, I changed the font color to darken it a bit:
span.activity, div#message p {
background: none repeat scroll 0 0 #FFF9DB;
border-bottom: 1px solid #FFE8C4;
border-radius: 3px 3px 3px 3px;
border-right: 1px solid #FFE8C4;
color: #444444;
display: inline-block;
font-size: 12px;
font-weight: normal;
margin-top: 6px;
padding: 1px 8px;
text-decoration: none;
}
Step 7 Adding Cufon Font Replacement
For this site, I used a free font called BorisBlackBloxx, and I generated a Cufon font via their site here. There are plugins to do font replacement, but I wanted to demonstrate how to do it manually in your theme. After I generated the font, I:
- Created a new folder named js, and placed my Cufon font files there.
- In the header.php of my child theme, I called the scripts by adding the following within my <head> section:
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/cufon-yui.js"></script> <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/BorisBlackBloxx_500.font.js"></script> - I then replaced the elements by adding this right below the scripts I called above:
<script type="text/javascript"> Cufon.replace('#header li, #intro_text, h1, h2, h3, h4, h5'); </script>
Since WordPress automatically enqueues jQuery, I didn't need to place that in the head section. Also, you can replace any element by simply adding it to the list that is already there.
Conclusion
In conclusion, I hope this part of the series gave you a better understanding of how easy it really is to create custom BuddyPress child themes. I know there are a lot of people who could take what I've written above and make some killer sites that I would love to see.
In part 3, I'll turn our attention to the user experience of BuddyPress and how to customize elements such as: user home pages, blogs, and groups. Thanks for reading and I hope I've helped you with some new ideas that will help you dig deeper into theming with BuddyPress!
Comments