Make WordPress Core

Opened 13 years ago

Closed 13 years ago

#17741 closed enhancement (fixed)

Twenty Eleven: Tweaking the tiny bubbles

Reported by: iandstewart's profile iandstewart Owned by: nacin's profile nacin
Milestone: 3.2 Priority: normal
Severity: normal Version: 3.2
Component: Bundled Theme Keywords:
Focuses: Cc:

Description

With the addition of an icon for the "Leave a Comment" link on the index pages it's brother, the comments number link, is looking a little out of place.

Attachments (9)

tiny-bubbles.diff (580 bytes) - added by iandstewart 13 years ago.
The attached patch tweaks the bubble text just a bit so it better matches the weight and style of the icon. There's a little less contrast but I think, as a somewhat decorative element, that's OK.
comment-bubble-after.png (98.3 KB) - added by iandstewart 13 years ago.
comment-bubble-before.png (105.2 KB) - added by iandstewart 13 years ago.
comment-bubble-before-after.png (170.1 KB) - added by iandstewart 13 years ago.
bubbles.zip (22.0 KB) - added by iandstewart 13 years ago.
free-bubbles.diff (2.8 KB) - added by iandstewart 13 years ago.
free-bubbles-with-hover.png (98.1 KB) - added by iandstewart 13 years ago.
comment-bubbles.zip (2.8 KB) - added by iandstewart 13 years ago.
Revised bubbles courtesy of matveb
matveb-bubbles.diff (3.1 KB) - added by iandstewart 13 years ago.
Refreshed patch courtesy of matveb

Download all attachments as: .zip

Change History (18)

@iandstewart
13 years ago

The attached patch tweaks the bubble text just a bit so it better matches the weight and style of the icon. There's a little less contrast but I think, as a somewhat decorative element, that's OK.

#1 @iandstewart
13 years ago

  • Keywords has-patch dev-feedback added

@iandstewart
13 years ago

#2 @iandstewart
13 years ago

Nacin brought up an interesting design flaw that free-bubbles.diff (get your bubbles in bubbles.zip) attempts to correct.

"my test blog only has a few comments per post. I imagine that's common. a giant circle with a relatively small 1 in the middle that lights up like crazy on hover just looks… weird. he comment icon looks great, but the moment there's one comment, it makes me … sad."

Props to koopersmith for suggesting a subtle shadow on the icon.

#3 @iandstewart
13 years ago

  • Keywords needs-refresh added

Just noticed that .leave-reply isn't specific enough and is hiding footer reply links

#4 @iandstewart
13 years ago

matveb is working on a refreshed patch for this.

#5 @matveb
13 years ago

Some thoughts on this: one of the points in using a geometrical CSS figure was so that we didn't rely on images for relevant visual elements; thus allowing for easy customizations with background colors, etc. Changing this would be a step backward for extensibility, in a way. See http://myphotomaton.wordpress.com/

Having said that, if we're going forward with it, we think something like the following fits the design a bit better (no drop shadow and with transparent border):
http://cl.ly/1t0M083S3h4306262c2I
http://cl.ly/2A2i110a0X0u0h0T1V3v

@iandstewart
13 years ago

Revised bubbles courtesy of matveb

@iandstewart
13 years ago

Refreshed patch courtesy of matveb

#6 @iandstewart
13 years ago

  • Keywords needs-refresh removed

#7 @nacin
13 years ago

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

In [18255]:

New comment bubble styling! props matveb, iandstewart, fixes #17741.

#8 @koopersmith
13 years ago

  • Keywords has-patch dev-feedback removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

The text in the "reply" bubbles is not vertically centered in Chrome. This can be fixed by slightly altering the line height. It is currently 36px and should probably be changed to 34px or 35px.

#9 @azaozz
13 years ago

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

In [18336]:

Twenty Eleven: Tweaking the tiny bubbles, again. fixes #17741

Note: See TracTickets for help on using tickets.