Make WordPress Core

Opened 7 years ago

Closed 7 years ago

Last modified 6 years ago

#8063 closed defect (bug) (fixed)

Aesthetic issue with button-primary background image

Reported by: jick Owned by:
Milestone: 2.7 Priority: high
Severity: normal Version: 2.7
Component: UI Keywords: has-patch needs-testing
Focuses: Cc:


From screenshots I've seen it doesn't seem to be an issue on Mac(Safari?) but for me (in Firefox 3.0.3 on Ubuntu Linux version 8.04 with all current updates) the background image on buttons with the class button-primary doesn't seem right. More specifically, there seems to be a couple-pixel gap between the bottom of the actual button and the background image it has. I only notice this while not hovering over the button (when it's in it's default state). I do notice it on all buttons with the class button-primary. I have attached a screenshot which highlights the issue.

If needed I can post any other info specific to my current setup.

Attachments (2)

button-issue.png (12.7 KB) - added by jick 7 years ago.
A small screenshot which highlights the issue.
button-primary-color-patch.diff (954 bytes) - added by jick 7 years ago.

Download all attachments as: .zip

Change History (12)

@jick7 years ago

A small screenshot which highlights the issue.

comment:1 @jick7 years ago

By changing this line (in the file ./wp-admin/css/colors-fresh.css):

background: #21759B url(../images/button-grad.png) repeat-x scroll left top;

To this:

background: #1F6C8F url(../images/button-grad.png) repeat-x scroll left top;

It seems to fix it visually, but I'm not sure if that is the best fix. Anyone else?

However, if that is the best way then I'd assume a similar change would need to be done in colors-classic.css and any other similar color schemes as well.

comment:2 @jick7 years ago

Nobody interested in this issue?

comment:3 @jick7 years ago

  • Priority changed from normal to high
  • Severity changed from trivial to normal

I'm setting the priority higher on this to try to get it some more attention. It isn't a critical issue but I do think it is something that should be resolved before the final 2.7 release.

comment:4 @jick7 years ago

Just an update:
I can confirm this on Ubuntu 8.10 now. I just upgraded recently. Still Firefox 3.0.3 though.

I also just checked this issue in Opera on Ubuntu 8.10 and it doesn't seem to show the issue either. So, it must be contained to either just Firefox or just Firefox on Ubuntu. Can't be sure really since I don't currently have a Windows box to check (or any other OS for that matter).

comment:5 @DD327 years ago

Took me awhile to see the problem in that image..

I cant see anything like that in Opera on Windows, But by the look of the image, The background colour(not image) of the button might need to be changed a few shades darker.. But that doesnt explain your problem..

comment:6 @jick7 years ago

Changing the background color a few shades darker is what I did in the example code I posted in my first reply and that seems to fix the issue from an aesthetic standpoint but, like I said, I'm not sure if that is the best fix for the problem. It could be, I'm just not sure.

I think the problem is caused due to Firefox rendering the text differently than others. Perhaps maybe even just how Firefox renders the text on Ubuntu. Or it could even just be my font settings. I can't really be sure. But, I can tell it is being caused by something to do with the font because of the way the buttons are taller in Firefox (at least for me) than in others. I know from screenshots of Safari that it seems to render the buttons in WordPress shorter than what I'm seeing on my current setup with Firefox. Like I said, it could be a number of different things making the buttons taller for me but, that does seem to be the root of the problem. It seems the background image for buttons was designed for shorter buttons. But, obviously something on my setup doesn't seem to be going for that. :p

comment:7 @jick7 years ago

  • Keywords has-patch needs-testing added

I'm attaching this patch which contains the fix I have mentioned in my replies on this ticket. If it is deemed as the best fix it can be committed.

comment:8 follow-up: @jick7 years ago

Was this fixed by someone else? Because, I just updated to the latest from the svn and I don't seem to be seeing this issue any longer.

comment:9 in reply to: ↑ 8 @azaozz7 years ago

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

Replying to jick:

Was this fixed by someone else? Because, I just updated to the latest from the svn and I don't seem to be seeing this issue any longer.

Yes, sorry forgot to close this ticket. It was fixed by making the background image taller, so it covers the whole height of the button.

comment:10 @jick7 years ago

Cool! Thanks.

Note: See TracTickets for help on using tickets.