WordPress.org

Making WordPress.org

Opened 3 years ago

Closed 3 years ago

#2147 closed defect (fixed)

Support Theme needs styling for badges

Reported by: SergeyBiryukov Owned by: coffee2code
Milestone: Priority: normal
Component: Support Forums Keywords: ui-feedback has-screenshots
Cc:

Description

New theme for https://wordpress.org/support/ was committed in [4248].

It needs styling for moderator badges added in #2073.

Currently the badges are displayed in plain text, see the screenshot.

Attachments (8)

meta-2147.png (41.1 KB) - added by SergeyBiryukov 3 years ago.
meta-2147.1st-pass.png (43.2 KB) - added by SergeyBiryukov 3 years ago.
meta-2147.old-theme.png (66.0 KB) - added by SergeyBiryukov 3 years ago.
meta-2147.left-badge.png (55.1 KB) - added by coffee2code 3 years ago.
Example with badge and border on left (same as the old theme)
meta-2147.box-shadow-missing.png (82.2 KB) - added by coffee2code 3 years ago.
box-shadow missing in user's replies view. (also badge overlap)
meta-2147.plugin-badge.png (49.4 KB) - added by coffee2code 3 years ago.
Plugin Author badge with plugin team badge color
meta-2147.theme-badge.png (35.5 KB) - added by coffee2code 3 years ago.
Theme Author badge with theme team badge color
meta-2147.diff (2.7 KB) - added by coffee2code 3 years ago.
Patch incorporating use of box-shadow for badge left "border". Also syncs plugin and theme badges with respective team colors.

Download all attachments as: .zip

Change History (19)

#1 @SergeyBiryukov
3 years ago

How does meta-2147.1st-pass.png look like? It uses these styles:

#bbpress-forums .by-moderator {
	border-right: 3px solid #33B4CE;
}
#bbpress-forums .by-plugin-author,
#bbpress-forums .by-plugin-contributor,
#bbpress-forums .by-theme-author,
#bbpress-forums .by-theme-contributor {
	border-right: 3px solid green;
}

#bbpress-forums .author-badge {
	color: #fff;
	padding: 0 8px;
	float: right;
	font-style: italic;
	text-shadow: 1px 1px 3px #666;
}

#bbpress-forums .author-badge-moderator {
	background-color: #33B4CE;
}

#bbpress-forums .author-badge-plugin, #bbpress-forums .author-badge-theme {
	background-color: green;
}

#2 @SergeyBiryukov
3 years ago

meta-2147.old-theme.png is a screenshot of the old theme, for reference.

#3 @SergeyBiryukov
3 years ago

  • Keywords ui-feedback added

Needs UI feedback for comment:1.

@coffee2code
3 years ago

Example with badge and border on left (same as the old theme)

#4 @coffee2code
3 years ago

  • Keywords has-screenshots added

Added meta-2147.left-badge.png as an example of the badge and border on the left (same as for old theme).

Same styles as above but replace the 2 occurrences of border-right with border-left, and change the float: right; to

position: absolute;
top: 12px;
left: 0;

#5 follow-up: @SergeyBiryukov
3 years ago

meta-2147.left-badge.png was my initial attempt as well, but I thought it doesn't look good, because there's no space between the border and Gravatar. Adding some space would help, but it would also break left alignment for non-moderator posts.

@mapk: What would you prefer here?

#6 @SergeyBiryukov
3 years ago

  • Summary changed from Forums: New theme needs styling for badges to Support Theme needs styling for badges

#7 in reply to: ↑ 5 @mapk
3 years ago

Replying to SergeyBiryukov:

meta-2147.left-badge.png was my initial attempt as well, but I thought it doesn't look good, because there's no space between the border and Gravatar. Adding some space would help, but it would also break left alignment for non-moderator posts.

@mapk: What would you prefer here?

I like the direction. Thanks for picking this up! What if we adjusted the CSS so it's a box-shadow instead of a border-left? Something like this:

.by-moderator {
    box-shadow: -4px 0 0 white, -6px 0 0 #33B4CE;
}

and

.by-moderator .author-badge-moderator {
    position: absolute;
    top: 14px;
    left: -6px;
    padding: 2px 5px;
    background: #33B4CE;
    color: white;
    font-size: 0.6rem;
    letter-spacing: 1px;
    border-radius: 0 2px 2px 0;
}

The double box-shadow values help push the blue border/shadow away from the avatar. Let me know what you think? Are there other tags that we should also consider? Maybe we can come up with a color scheme for them?

https://cldup.com/YyOUSJc34f.png

@coffee2code
3 years ago

box-shadow missing in user's replies view. (also badge overlap)

@coffee2code
3 years ago

Plugin Author badge with plugin team badge color

@coffee2code
3 years ago

Theme Author badge with theme team badge color

@coffee2code
3 years ago

Patch incorporating use of box-shadow for badge left "border". Also syncs plugin and theme badges with respective team colors.

#8 follow-up: @coffee2code
3 years ago

@mapk: Nice! I like that. Unfortunately the box-shadow doesn't appear on the user replies view (e.g. https://wordpress.org/support/users/sterndata/replies/). See meta-2147.box-shadow-missing.png. I didn't initially resolve it so I'm leaving meta-2147.diff for anyone to try out.

As for badges, there are currently five:

  • Moderators
  • Plugin Author
  • Plugin Contributor
  • Theme Author
  • Theme Contributor (not currently utilized)

The plugin and theme badges were green (for no real reason) and have existed the longest. The moderator badge is more recent and was thus given a different badge color -- that of the support team's profiles.wordpress.org badge.

The plugin and theme badges could be likewise be re-colored to match their respective team badges:

  • Plugins: #f06723
  • Themes: #4e3288

Attached is meta-2147.diff, which applies comment 7 styling and minor tweaks and includes the modification of those badge colors. See meta-2147.plugin-badge.png and meta-2147.theme-badge.png for examples of those re-colored badges.

#9 in reply to: ↑ 8 ; follow-up: @mapk
3 years ago

Replying to coffee2code:

@mapk: Nice! I like that. Unfortunately the box-shadow doesn't appear on the user replies view (e.g. https://wordpress.org/support/users/sterndata/replies/). See meta-2147.box-shadow-missing.png. I didn't initially resolve it so I'm leaving meta-2147.diff for anyone to try out.

So looks like we need to restyle the layout of the user replies page, yes? Is that the solution that's needed?

#10 in reply to: ↑ 9 @coffee2code
3 years ago

Replying to mapk:

So looks like we need to restyle the layout of the user replies page, yes? Is that the solution that's needed?

I don't think we need to go that far unless there are reasons unrelated to badge-styling for doing so. I've played around with it and have badge-styling looking decent on that view. I'll test the changes a bit more and then just commit those changes atop meta-2147.diff and we can just iterate from there.

#11 @coffee2code
3 years ago

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

In 4293:

Support Theme: Add styling for user badges.

Also changes colors of plugin- and theme-related badges to match their respective profiles.wordpress.org team colors.

Props mapk, SergeyBiryukov, coffee2code.
Fixes #2147.

Note: See TracTickets for help on using tickets.