How to style the BuddyPress Default Theme

Ray and I have been working on Livestatus, a status report system for television broadcasters. We decided that BuddyPress would be a superb platform to use for this and went with it.

There aren’t many Themes available for BuddyPress so we went with the default theme which I think works best. However there’s still a lot of clutter we didn’t need so I made some quick amendmends.

Here are my notes if you’d like to have a go.

First of all, the BuddyPress Default Theme is a rather complex one so I’d recommend creating a Child Theme rather than amending source code. It’s the best and most future proof way for any theme you’d like to tweak because you’re covered if the developers bring out an update.

I’ll explain more of this in another article and assume you’re familiar with setting up your own child theme for now. The following code amendmends are additions to your child theme’s style.css file.

Getting rid of Gravatars

Gravatars are a great idea, but if you don’t have 100 users on the site than they just get in the way. Particularly we wanted to remove Gravatars from Groups which appear in several places:

• widgets in the sidebar
• in the activity stream
• and in the main group feed

In this order, here’s how you eliminate them:

/* remove Group Avatars from Activity Stream */
.activity-header img {display: none;}
/* and from the sidebar */
.item-avatar {display: none;}

When you click on a group you’ll see the Group Headline and a huge avatar next to it. Removing the image doesn’t collapse the headline though so we’ll bring it close to the left while we’re fiddling:

/* remove Group Headline Avatars and indent heading further left */
#item-header-avatar img {display: none;}
#item-header {margin-left: -100px;}

Bigger Text in Activity Stream

We wanted our status updates to have some oompf so the tiny text needed to be bigger for maxiumum impact. Here’s how:

/* make activity messages bigger */
.activity-inner p {font-size: 1.5em;}

Since Livestatus is all about letting people know a status per match we’re dealing with, we wanted the group name to be bigger as well. Throw in a different colour while we’re at it:

/* bigger Group headlines and link colour */
.activity-header p a {font-size: 1.2em; font-weight: bold; color: red;}

Eliminate the Sidebar Login Box

Our clients didn’t want to encourage user interaction. The default Login Box in the sidebar however suggests to passing users that thet can register and participate. We removed the box like this:

/* remove login form */
#login-text {display: none;}
#sidebar-login-form {display: none;}

There’s also a yellow box in the sidebar which reports the currently active users. We don’t need this either:

/* remove yellow members box from sidebar */
.item-meta .activity {display: none;}

Renaming Elements like “Groups”

The term “groups” didn’t really make sense the way we were using them. In our case, they needed to be called “matches” (as in football matches). But how to change them?

If you had expected a quick function or HTML tweak somewhere think again… the word “group” and many other elemts are in fact generated in countless functions in BuddyPress. The way to rename them is to “translate” each phrase into something else. Thanks to BuddyPress’s internationalisation option that’s possible – yet a rather complex task – as this article from the Codex explains.

In a nutshell these are the steps:

• get a translation tool like PO Edit (it’s free)
• make a copy of the buddypress.pot file in /buddypress/bp-languages and rename it buddypress-en_US.po
• open this copied file with POedit and start translating phrases
• be careful to check every iteration of the element you’d like to rename
• once done, save your .po file (POedit will generate a .mo file on this occasion)
• move both .po and .mo files into /wp-content/languages (if this folder doesn’t exist please create it)

Assuming you’re using the US English version of WordPress, BuddyPress should now reflect your translated elements. If you’re runnnig a different language version then make sure you rename your .po and .mo files to the locale you’re using (i.e. buddypress-de_DE.po – whichever language is defined in wp-config.php).

Hope this helps 😉