WordPress.org

Make WordPress Core

Opened 10 years ago

Closed 10 years ago

#17741 closed enhancement (fixed)

Twenty Eleven: Tweaking the tiny bubbles

Reported by: iandstewart Owned by: 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 10 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 10 years ago.
comment-bubble-before.png (105.2 KB) - added by iandstewart 10 years ago.
comment-bubble-before-after.png (170.1 KB) - added by iandstewart 10 years ago.
bubbles.zip (22.0 KB) - added by iandstewart 10 years ago.
free-bubbles.diff (2.8 KB) - added by iandstewart 10 years ago.
free-bubbles-with-hover.png (98.1 KB) - added by iandstewart 10 years ago.
comment-bubbles.zip (2.8 KB) - added by iandstewart 10 years ago.
Revised bubbles courtesy of matveb
matveb-bubbles.diff (3.1 KB) - added by iandstewart 10 years ago.
Refreshed patch courtesy of matveb

Download all attachments as: .zip

Change History (18)

@iandstewart
10 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
10 years ago

  • Keywords has-patch dev-feedback added

@iandstewart
10 years ago

#2 @iandstewart
10 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
10 years ago

  • Keywords needs-refresh added

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

#4 @iandstewart
10 years ago

matveb is working on a refreshed patch for this.

#5 @matveb
10 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
10 years ago

Revised bubbles courtesy of matveb

@iandstewart
10 years ago

Refreshed patch courtesy of matveb

#6 @iandstewart
10 years ago

  • Keywords needs-refresh removed

#7 @nacin
10 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
10 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
10 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.