BuddyPress

dl the zip untill it’s added to the respiratory – Buddypress UX

I just uploaded a theme I created focused on enhancing the user experience – 3 column layout: multiple sidebars allowing for relative content to context, zebra activity styling, an enhanced logged-in widget and more.. The theme serves to be a base to work from and learn from whilst offering an alternative to the buddypress default theme.

A special thanks to r-a-y, hnla, DJPaul, dwenaus, modemlooper and boonebgorges for helping me problem solve and furthering my skill set over the past two years. The theme is a ‘response’ to the post I read earlier today. Screw this..: people often forget that these people help us out of their ‘own time’, buddypress is community driven and we should, how ever we can, give back to the community. Sorry if I have left anyone out.

Let’s hope it gets approved. I hope to get feedback/criticism on how the theme could be improved. In the mean time you can read the below.

What’s been changed in the theme?

The theme has been customized for a better user experience, there are a lot of small changes and I will try to list them all.

-added multiple sidebars: home/index, activities, members, groups, forums, blog.
-added a smaller header and content padder for the following pages; so users can focus on the task at hand, also removed the sidebars: registration page, create groups page.
-added zebra styled activity streams for better readability*
note there is an issue with IE
-customized the logged-in widget with some added functionality, previously located in the buddypress default sidebar ( sidebar.php ). This was done to improve ‘user navigation’.
-customized the activity form ( what’s new *user* ).
-added a ‘change avatar’ link to a members profile, ( ../members/single/member-header.php ). This is only visable by the ‘profile owner’.

Themes intended purpose

This theme has been created to allow ‘new comers’ to Buddypress to have a bit more of a variety and a base to work from ( being a child theme of the buddypress default theme ) whilst maybe learning a thing or two – as the theme is well documented ( readme.txt ).
Along with the above, I have tried to create a theme where by the user experience is better enhanced, allowing for better usability and readability.

To do

-fix the issue with the zebra styled activity streams not showing in IE.
-fix a issue where by if the content area is ‘shorter’ than the sidebars ( being ‘taller’ from widgets ), the content boarder breaks.
-remove unnecessary ‘pages’ and clean up the css.

Hey, nice one Update us here when it gets approved (I assume you’re talking about the wordpress.org list?)

fix a issue where by if the content area is ’shorter’ than the sidebars ( being ‘taller’ from widgets ), the content boarder breaks.

Research Faux columns for backgrounds running full height and overlapping borders using negative margins to create the illusion of a full height single borders.

What’s the issue with stripping and IE?

I trust that the ‘screw this’ chap has requested a full refund

Thanks hnla, Ill have a look tomorrow. I added a link to the zipped theme in the above post

I implemented the striping via css, though I saw there’s also a way to do it via php and jquery though Im not sure how to do it any other way, need more detail: style Activity Stream odd and even posts. The stripes don’t show for ‘odd’.
Also activity-comments need to show white when on a ‘odd’ – havn’t seen this covered anywhere on the forums?

Last thing, is it better to have separate sidebars by calling the sidebar directly on the different pages apposed to using queries?

Just noticed I have to add padding to the activity-meta, along with other elements in the same ‘position’.

@nit3watch Thanks for the message, and thanks for sharing the theme. I can’t wait to check it out.

This is a really good step. I’m developing a site that will most likely be used on netbooks, and the top pane navigation just takes up way too much space. This theme should give me a good base to modify and develop my own off of. Any tips? Basically what I want to do is:

(1) Move all the ‘Activity’ ‘Blogs’ ‘Groups’ etc. links to the left menu.

(2) Reduce the Header size by 2/3s or so.

(3) Make the left column a single column

(4) Get it to like facebook where the header and left pane don’t reload on clicks.

Compare the Activity screen of your theme compared to Facebook

You can see how much more information is provided on facebook and how much easier it is to navigate around.

I still need to clean the theme up a bit more, left some of my personal-project stuff in there >.<

@treis if you have a look at the Buddybar widget, I have simply copied most of whats in the widget to the static-sidebar. Personally I think its a bit too much going on hence I focused it on the ‘user’.

I have added modemloopers ‘drop-down menu’ functionality so if you would like, you can simply the main navigation by having ‘community’ and groups, members, activity all under the ‘community tab’. Im just ganna finish up some things and i will upload it.

I will post some css you can use to modify the header..

I would advise not working off it as of yet, once I have a ‘stable’ version I will let you know. If you make any changes, they will be over-written when you upgrade the theme. I will try get round to it later on today. I modified the them in a day and released it the same day hence I over-looked some things.

I just uploaded a new version, still in beta but making a few improvements. Note that if you have any questions, read the readme.txt first.

@hnla Im still searching regarding Faux columns, though if you could maybe have a look at the theme in the mean time I could reach a solution sooner.

Thanks and cheers

where can i download this theme please

@naijaping links at the top of the first post

The fact that the sidebars may vary in length as well as the centre content makes life harder overlapping borders works but will still result in an apparent miss-match if one sidebar is longer than the other as is the case presently. Really your only two options are using a graphic (create a border take a slice of it of a few pixels but not too few 10 or 2 wide by ~20 high add an extra div as a child of the main #content / #container (parent that wraps content and sidebars) and then you add a background to each of these two divs and use position to place the graphic in from the edges by the sidebar width alternatively you could try a technique that can work but also can lead to issues depending on the layout: give the sidebars a huge amount of bottom padding, then an equal amount of negative bottom margin and overflow hidden on the parent element rn the borders on the sidebars rather than the center element.

nicely done ,thanks for sharing

lol need to upload a new version again.. ganna rather wait a day or two and sort out things poperly

Turn on debugging, as I spotted a few deprecated functions pop up in warnings.

Uploading to repo is probably best slowed down it’s tempting to upload at every change but it’s inevitable that the quicker you rush to upload the more likely the second after you realise you forgot to change version numbers and a hundred other little things

@Nit3watch I re-factored the link in this thread:

http://buddypress.org/community/groups/how-to-and-troubleshooting/forum/topic/css-trick-how-to-style-activity-stream-odd-and-even-posts/

To locate the post I made with snippet and also pasted into the thread above, it may help?