Skip to:
Content

Opened 19 months ago

Closed 17 months ago

Last modified 17 months ago

#1964 closed defect (fixed)

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

Reported by: 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 19 months ago.
1964.diff (2.2 KB) - added by jaredatch 19 months ago.
WordPress .org User Profiles.PNG (122.3 KB) - added by netweb 18 months ago.
1964-2.diff (9.9 KB) - added by netweb 18 months ago.
1964-3.diff (13.1 KB) - added by netweb 18 months ago.
Updated with Tabs for User Profile
1964 Diff3 2010.PNG (59.2 KB) - added by netweb 18 months ago.
Twenty Ten Theme
1964 Diff3 2011.PNG (56.0 KB) - added by netweb 18 months ago.
Twenty Eleven Theme
1964 Diff3 2012.PNG (57.5 KB) - added by netweb 18 months ago.
Twenty Twelve Theme
profiles.patch (16.6 KB) - added by johnjamesjacoby 17 months ago.
Capture.PNG (6.4 KB) - added by ellipszist 17 months ago.
breadcrumb
Topic Tags.PNG (14.6 KB) - added by ellipszist 17 months ago.
Topic Tags Page

Download all attachments as: .zip

Change History (31)

jaredatch19 months ago

comment:1 jaredatch19 months 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.

comment:2 netweb18 months ago

  • Cc stephen@… added

comment:3 follow-up: netweb18 months 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.

netweb18 months ago

comment:4 netweb18 months 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

netweb18 months ago

Updated with Tabs for User Profile

netweb18 months ago

Twenty Ten Theme

netweb18 months ago

Twenty Eleven Theme

netweb18 months ago

Twenty Twelve Theme

comment:5 jaredatch17 months ago

  • Cc jared@… added

comment:6 in reply to: ↑ 3 johnjamesjacoby17 months 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 17 months ago by johnjamesjacoby (previous) (diff)

comment:7 netweb17 months 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.

comment:8 jaredatch17 months ago

  • Milestone changed from 2.3 to 2.2.2

johnjamesjacoby17 months ago

comment:9 johnjamesjacoby17 months 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)

comment:10 johnjamesjacoby17 months 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)

ellipszist17 months ago

breadcrumb

comment:11 ellipszist17 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

comment:12 johnjamesjacoby17 months 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)

comment:13 johnjamesjacoby17 months ago

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

comment:14 follow-up: johnjamesjacoby17 months ago

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

ellipszist17 months ago

Topic Tags Page

comment:15 ellipszist17 months 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;

comment:16 ellipszist17 months ago

line 261

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

comment:17 in reply to: ↑ 14 johnjamesjacoby17 months 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.

comment:18 ellipszist17 months ago

yes i use bbpress 2.2.2

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

Last edited 17 months ago by ellipszist (previous) (diff)

comment:19 ellipszist17 months ago

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

comment:20 ellipszist17 months ago

open new ticket.

Note: See TracTickets for help on using tickets.