Topic: New theme – Buddypress UX

New theme – Buddypress UX

nit3watch
Participant

@nit3watch

13 years ago

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.

Viewing 25 replies - 1 through 25 (of 25 total)

Paul Wong-Gibbs
Keymaster

@djpaul

13 years ago

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

Hugo Ashmore
Keymaster

@hnla

13 years ago

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

nit3watch
Participant

@nit3watch

13 years ago

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’.

Boone Gorges
Keymaster

@boonebgorges

13 years ago

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

treis
Member

@treis

13 years ago

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

http://i18.photobucket.com/albums/b119/treis/blog.jpg
http://i18.photobucket.com/albums/b119/treis/fb.jpg

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

nit3watch
Participant

@nit3watch

13 years ago

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.

nit3watch
Participant

@nit3watch

13 years ago

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

Prince Abiola Ogundipe
Participant

@naijaping

13 years ago

where can i download this theme please

nit3watch
Participant

@nit3watch

13 years ago

@naijaping links at the top of the first post

Hugo Ashmore
Keymaster

@hnla

13 years ago

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.

Alan
Member

@uloga

13 years ago

nicely done ,thanks for sharing

nit3watch
Participant

@nit3watch

13 years ago

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

Hugo Ashmore
Keymaster

@hnla

13 years ago

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

Hugo Ashmore
Keymaster

@hnla

13 years ago

@Nit3watch I re-factored the link in this thread:
https://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?

nit3watch
Participant

@nit3watch

13 years ago

Turn on debugging, as I spotted a few deprecated functions pop up in warnings.
Ye rushing doesn’t help, all good n green now

Thanks hnla, I saw you posted something similar concerning forum topics.. and ye the link was dead.

Anyway ill give it a go in the morning, and im linking back to blogs and forum topics on how the functionality has been implemented.

nit3watch
Participant

@nit3watch

13 years ago

Added a version which is stable and all errors sorted out. Only thing left to do; is work on the styling of the main nav bar as anything other that of ‘home’ selected doesn’t reflect the selected colour..

The guy reviewing my theme has pointed out that there should be a option to disable/enable the admin bar. Iv’e documented this in the readme.txt so Im not going to bother with it and he also pointed out that having a crap load of menus will kinda break the theme – if you want to use that many menus, good luck! link to the menu

I specifically included the custom menu/drop down menus as to reduce ‘cluttered menus’.

Hugo Ashmore
Keymaster

@hnla

13 years ago

*puzzled* what does he mean??!! and he also pointed out that having a crap load of menus will kinda break the theme point out to him that a crap load of menus is the result of users adding pages and the way BP-default is coded, horizontal links are never wise with dynamic sites where you can not account for links generated. Using the new WP menus the user can control this aspect I thought @modemlooper was reviewing BP submissions?

Xevo
Participant

@xevo

13 years ago

Good websites dont have many links, it just confuses the user.

Hugo Ashmore
Keymaster

@hnla

13 years ago

I agree and I attempted to limit the sub pages displayed when we restyled the bp-default dropdowns so one couldn’t nest a series of pages 20 deep as that is in a similar vein to too many top links, trouble is with a theme one can’t really dictate these matters that’s up to the user to manage, but my puzzlement was that this reviewer didn’t understand that and passed the comment that they did, really it wasn’t something that ought to be commented on.

nit3watch
Participant

@nit3watch

13 years ago

on a good note, it seems Tammie ( from wpmu dev ) is reviewing the theme now and she has pointed out valid things. I’m guessing @karmatosed = Tammie because of her avatar in the images posted.

Hugo Ashmore
Keymaster

@hnla

13 years ago

yep they are one and the same and is familiar – obviously – with BP themes.

Menelik Seth
Member

@menelik-seth

13 years ago

This is inspiring two years eh? I’m just getting my feet wet with BuddyPress, and I’m trying to work towards something similar (a custom theme that I want to build to suit my own specific needs, but then give to the community for free). I look forward to trying out your theme, and who knows maybe build some child themes based on it.

Now back to coding I go.

Xevo
Participant

@xevo

13 years ago

Installed this yesterday, looks good.

Gonna use this as a base layer for my own theme.

Thanks!

nit3watch
Participant

@nit3watch

13 years ago

I will update the theme during next week, got a lot of work I have to get through before I can focus on the theme.. You can have a look at the theme trac and take note of what tammie has said if you are going to use it now

Tammie Lister
Moderator

@karmatosed

12 years, 12 months ago

TIs me Love to see it pass and trying out the next version.