WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#31325 closed enhancement (fixed)

Customizer: Remove Header images button hidden by some images

Reported by: jacklyn.jade Owned by: SergeyBiryukov
Milestone: 4.3 Priority: normal
Severity: normal Version: 4.2
Component: Customize Keywords: ux-feedback, has-patch, ui-feedback
Focuses: Cc:

Description

The option to remove an image uploaded for the header section of a theme is an "x" that appears on hover.

The "x" is a light grey color that can be difficult for users to see if they have images that are not mainly black or white. See the attached screen shots:
https://jackiejade.files.wordpress.com/2015/02/screen-shot-2015-02-12-at-7-32-28-pm.png
https://jackiejade.files.wordpress.com/2015/02/screen-shot-2015-02-12-at-7-33-15-pm.png

Perhaps something a little more noticeable would be nice here. Even the hover state of the "x" with the black and white outline would work.

Attachments (5)

31325.diff (884 bytes) - added by RDall 6 years ago.
Adds slight text shadow to X on both default style and rtl
31325.2.diff (434 bytes) - added by RDall 6 years ago.
Adds another px of blur-radius and removes the rtl edit.
31325.3.diff (425 bytes) - added by RDall 6 years ago.
Adds 2px of white background with no offset.
customizer-headerimg-x.png (927.0 KB) - added by melchoyce 6 years ago.
31325.4.diff (921 bytes) - added by RDall 6 years ago.
Changes X to white and puts transparent box behind as per Mel Choice Suggestion

Download all attachments as: .zip

Change History (24)

#1 @RDall
6 years ago

  • Keywords needs-patch ux-feedback added
  • Version set to trunk

Hi Jacklyn I think this could be solved with some text shadow behind the x. Will see if I can get a patch together.

@RDall
6 years ago

Adds slight text shadow to X on both default style and rtl

#2 @RDall
6 years ago

  • Keywords has-patch added; needs-patch removed
  • Summary changed from Customizer: Remove Header images to Customizer: Remove Header images button hidden by some images

This ticket was mentioned in Slack in #core by rdall. View the logs.


6 years ago

#4 @SergeyBiryukov
6 years ago

  • Keywords 4.3-early added
  • Milestone changed from Awaiting Review to Future Release

Thanks for the patch, a before/after screenshot would be helpful too :)

No need to patch RTL files, a post-commit task takes care of that.

@RDall
6 years ago

Adds another px of blur-radius and removes the rtl edit.

#5 @RDall
6 years ago

Latest patch 31325.2.diff is slightly adjusted on the blur radius from the previous patch.

Also here the before and after views as requested:

https://cldup.com/urWScsH90V.png

#6 @jorbin
6 years ago

  • Keywords ui-feedback added

There is clearly room for improvement here. I don't know if the blur is the right treatment though. It almost makes the X seem like something is wrong with it.

I wonder how this would look with no offset, maybe something like text-shadow: 0px 0px 2px #000000;

#7 @RDall
6 years ago

I'll give that a try on my next patch. The reason I used the blur is because I couldn't border the X as it was a dashicon as I though that would have been the best answer. I'll get you another patch this evening!

@RDall
6 years ago

Adds 2px of white background with no offset.

#8 @RDall
6 years ago

The left image is the pre-patch the middle image is with the patch and the right image is when you hover over the X. I went with the white again because it meshes with the white background of the hover state of the X in the right photo. Although it looks like they differ a lot in the photos in the patch the difference is in my opinion negligible.

https://cldup.com/Pk2ZpgXjuT.png

This ticket was mentioned in Slack in #core by rdall. View the logs.


6 years ago

#10 @SergeyBiryukov
6 years ago

  • Milestone changed from Future Release to 4.3

#11 @jorbin
6 years ago

Text shadow will work for 93% of users according to http://caniuse.com/#feat=css-textshadow , which I'm fine with. I'm going to ask in the design chat if there are any comments, but I like this change.

This ticket was mentioned in Slack in #design by jorbin. View the logs.


6 years ago

#13 @melchoyce
6 years ago

The text shadow feels really jagged and inelegant to me. In customizer-headerimg-x.png, I've explored adding a transparent black background to the X, and made the X itself white. It seems to work well on dark, light, and busy images.

Here's the css I ended up using:

.customize-control-header .uploaded .header-view .close {
  font-size: 20px;
  color: #FFF;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  visibility: hidden;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 20px;
  height: 20px;
  cursor: pointer;
  padding: 2px;
}

.customize-control-header .uploaded .header-view .close:hover {
  color: #FFF;
  text-shadow: none;
}

@RDall
6 years ago

Changes X to white and puts transparent box behind as per Mel Choice Suggestion

#14 @RDall
6 years ago

Hey @melchoyce I went ahead and tried out your suggestion and then made a new patch. I completely agree with you regarding this change. It is a much more elegant solution.

#15 @afercia
6 years ago

See also related #32227

#16 @obenland
6 years ago

  • Keywords 4.3-early removed

This ticket was mentioned in Slack in #core by rdall. View the logs.


6 years ago

This ticket was mentioned in Slack in #core by rdall. View the logs.


6 years ago

#19 @SergeyBiryukov
6 years ago

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

In 32382:

Customizer: Use a semantic, accessible element for Remove Header Image button.

Make the button more noticeable on dark, light, and busy images.

props afercia, RDall, melchoyce.
fixes #32227, #31325.

Note: See TracTickets for help on using tickets.