Support Theme needs styling for badges

[SergeyBiryukov]

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.

[SergeyBiryukov]

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;
}

[SergeyBiryukov]

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

[SergeyBiryukov]

Needs UI feedback for comment:1.

[coffee2code]

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

[coffee2code]

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;

[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?

[mapk]

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?

[coffee2code]

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

[coffee2code]

Plugin Author badge with plugin team badge color

[coffee2code]

Theme Author badge with theme team badge color

[coffee2code]

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

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

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.

[mapk]

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?

[coffee2code]

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.

[coffee2code]

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.