Skip to:
Content

bbPress.org

Opened 12 years ago

Closed 12 years ago

Last modified 12 years ago

#1964 closed defect (bug) (fixed)

Markup on user profile page doesn't work with most themes

Reported by: jaredatch's profile jaredatch Owned by:
Milestone: 2.2.2 Priority: normal
Severity: normal Version:
Component: Front-end Keywords: has-patch needs-testing dev-feedback
Cc: stephen@…, jared@…

Description

The markup on the bbPress user profile pages is weird and from my testing doesn't seem to work on most themes (actually any of the ones I've tested so far).

The problem is with the 2 columns, #bbp-single-user-details and #bbp-user-body.

The first (left) column has a static width of 150px while the second (right) column has a width of 80% and a 30px left margin.

The combination of static and percent widths doesn't seem to play nice. TwentyTwelve is a example of things bumping.

I haven't tested this, but I think a solution might be to make the left column 20% and float it left, while the right column is 70% floated right. This can be adjusted based on how much space you want between the columns. Then call a 300x300 px avatar (larger to accomodate for themes that may be full width) and set it to max-width:100% which would make it adjust to the size of the #bbp-single-user-details column.

Attachments (11)

Screen Shot 2012-10-05 at 4.14.14 PM.png (123.7 KB) - added by jaredatch 12 years ago.
1964.diff (2.2 KB) - added by jaredatch 12 years ago.
WordPress .org User Profiles.PNG (122.3 KB) - added by netweb 12 years ago.
1964-2.diff (9.9 KB) - added by netweb 12 years ago.
1964-3.diff (13.1 KB) - added by netweb 12 years ago.
Updated with Tabs for User Profile
1964 Diff3 2010.PNG (59.2 KB) - added by netweb 12 years ago.
Twenty Ten Theme
1964 Diff3 2011.PNG (56.0 KB) - added by netweb 12 years ago.
Twenty Eleven Theme
1964 Diff3 2012.PNG (57.5 KB) - added by netweb 12 years ago.
Twenty Twelve Theme
profiles.patch (16.6 KB) - added by johnjamesjacoby 12 years ago.
Capture.PNG (6.4 KB) - added by ellipszist 12 years ago.
breadcrumb
Topic Tags.PNG (14.6 KB) - added by ellipszist 12 years ago.
Topic Tags Page

Download all attachments as: .zip

Change History (31)

@jaredatch
12 years ago

#1 @jaredatch
12 years ago

  • Keywords has-patch needs-testing added

Patch does 25%/float left + 70%/float right columns. Also bumps the avatar size from 150px to 300px for themes that use full width or wide layouts.

Tested on TwentyTwelve and default Genesis theme. Probably could use testing on a few more themes just to be sure.

#2 @netweb
12 years ago

  • Cc stephen@… added

#3 follow-up: @netweb
12 years ago

I was looking at the wordpress.org's user profiles

eg. http://profiles.wordpress.org/netweb/

When you edit your 'own' profile you have a 'tabbed' layout for each section... (See attached pic)

With the idea to put each of the 'Topics Created', 'Replies Created', 'Favorites', 'Subscriptions' and 'Edit Profile' into a tab of their own for bbPress to mimic the wordpress.org site style.

I haven't added the 'tabs' to this 1st diff but everything else is in and probably just needs a couple of tweaks to use the same 'H2 Tabs' that are used for 'Forum Tools' and the bbPress About & Credits'

I have stopped for the night but will have a look in the morning for any feedback you may have left for me on the attached code and will add the 'tabs' tomorrow.

@netweb
12 years ago

#4 @netweb
12 years ago

  • Keywords dev-feedback added

Here it is with a few tweaks and tested on Twenty Twelve, Twenty Eleven & Twenty Ten

Things to do:

  • Fix Microformats hCard/vCard regarding the avatar/gravatar/profile link
  • Trim Whitespace

The source for the CSS Tabs I lifted from WordPress here

@netweb
12 years ago

Updated with Tabs for User Profile

@netweb
12 years ago

Twenty Ten Theme

@netweb
12 years ago

Twenty Eleven Theme

@netweb
12 years ago

Twenty Twelve Theme

#5 @jaredatch
12 years ago

  • Cc jared@… added

#6 in reply to: ↑ 3 @johnjamesjacoby
12 years ago

Replying to netweb:

I was looking at the wordpress.org's user profiles

eg. http://profiles.wordpress.org/netweb/

When you edit your 'own' profile you have a 'tabbed' layout for each section... (See attached pic)

With the idea to put each of the 'Topics Created', 'Replies Created', 'Favorites', 'Subscriptions' and 'Edit Profile' into a tab of their own for bbPress to mimic the wordpress.org site style.

I think using wp.org as inspiration is smart, except we're likely moving away from the tabbed approach in 2013. My opinion, based on the years we've had the default theme in BuddyPress, is the top-down list scales easier than a horizontal list of tabs. It also feels a bit less separated, as tabs are generally used in conjunction with some other grouping.

The other part, is that bbPress's current approach is technically simpler, and trying to get the CSS working correctly on all browsers in all themes is a little more difficult.

Mostly gut feelings, and I'm very open to more ideas here.

Last edited 12 years ago by johnjamesjacoby (previous) (diff)

#7 @netweb
12 years ago

And here I thought WP was moving towards tabs not away ;)

It's all good, as I said in IRC, I wasn't entirely sure on the above for 2.2 either.

Same, any ideas, mock ups, examples etc point me to them and I'll give it a go using as much of the current CSS as possible.

#8 @jaredatch
12 years ago

  • Milestone changed from 2.3 to 2.2.2

#9 @johnjamesjacoby
12 years ago

  • Resolution set to fixed
  • Status changed from new to closed

(In [4462]) Users:

  • Update for profiles to support more theme widths.
  • Update fields and description labels.
  • Move favorite and subscription X's to before topic title, instead of creating another faux-column.
  • Some HTML mark-up changes to support fixes.
  • Merge styles into RTL and reverse as needed.
  • Fixes #1964 (trunk)

#10 @johnjamesjacoby
12 years ago

(In [4463]) Users:

  • Update for profiles to support more theme widths.
  • Update fields and description labels.
  • Move favorite and subscription X's to before topic title, instead of creating another faux-column.
  • Some HTML mark-up changes to support fixes.
  • Merge styles into RTL and reverse as needed.
  • Fixes #1964 (2.2 branch)

@ellipszist
12 years ago

breadcrumb

#11 @ellipszist
12 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

#12 @johnjamesjacoby
12 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

(In [4475]) Revert clear removal on topic and reply lists. Force none in profiles. Fixes #1964 (trunk)

#13 @johnjamesjacoby
12 years ago

(In [4476]) Revert clear removal on topic and reply lists. Force none in profiles. Fixes #1964 (2.2 branch)

#14 follow-up: @johnjamesjacoby
12 years ago

Committed to 2.2.2 tag, as download count was in single digits.

@ellipszist
12 years ago

Topic Tags Page

#15 @ellipszist
12 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Topic Tags Page :

Widgets area don't show on the right side.
and #bbp-topic-hot-tags needed

clear: both;

#16 @ellipszist
12 years ago

line 261

div.bbp-topic-tags {
	float: right;
}
Last edited 12 years ago by ellipszist (previous) (diff)

#17 in reply to: ↑ 14 @johnjamesjacoby
12 years ago

Replying to johnjamesjacoby:

Committed to 2.2.2 tag, as download count was in single digits.

Not related to this ticket. Please open a new one, and include more details on how to reproduce. Also, can you try on the latest version of bbPress 2.2.2? Try replacing your existing files.

#18 @ellipszist
12 years ago

yes i use bbpress 2.2.2

line 261 is problem,
and needed clear: both; for #bbp-topic-hot-tags.

Last edited 12 years ago by ellipszist (previous) (diff)

#19 @ellipszist
12 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

#20 @ellipszist
12 years ago

open new ticket.

Note: See TracTickets for help on using tickets.