WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 4 years ago

#25930 closed defect (bug) (fixed)

Twenty Fourteen: Search Bar Widget style is very dark

Reported by: RDall Owned by: lancewillett
Milestone: 3.8 Priority: normal
Severity: normal Version: 3.8
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:

Description

The search bar in the Twenty Fourteen primary sidebar is very dark. Almost invisible against the black background of Twenty Fourteen.

See Screenshot:
http://cl.ly/image/0E223U3N2w3g

Suggested solution is to increase the contrast of the text and border so people know the search bar is there.

http://f.cl.ly/items/1D372V191f2a3U0z1O2b/Screen%20Shot%202013-11-12%20at%2011.02.23%20AM.png

I'll be submitting the patch shortly :-)

Attachments (4)

25930.diff (732 bytes) - added by RDall 5 years ago.
Put in style specific to widget search form and placeholder text to improve readability.
25930.1.diff (732 bytes) - added by RDall 5 years ago.
Translates rgba to hex for placeholder extension
25930.2.diff (732 bytes) - added by RDall 5 years ago.
Disregard last diff I hadn't committed the local change I made and when I ran the diff it took from the previous version.
25930.3.diff (1.2 KB) - added by iamtakashi 5 years ago.

Download all attachments as: .zip

Change History (12)

@RDall
5 years ago

Put in style specific to widget search form and placeholder text to improve readability.

#1 @RDall
5 years ago

  • Keywords has-patch added; needs-patch removed

#2 @lancewillett
5 years ago

  • Milestone changed from Awaiting Review to 3.8

#3 @iamtakashi
5 years ago

If we are going to change the style, we should change all input and textarea for the sidebar rather than specifically for the search widget.

#4 follow-up: @RDall
5 years ago

In some of the documentation I looked up on placeholder the colour was either a hex code or a color. I never saw the use of the rgba in any of the examples.

What was happening was the placeholder couldn't read the rgba style.

In conversation with iamtakashi on IRC I said I wanted to keep to his colours implemented but this caused confusion as that is what I was over writing in my patch.

I had used the hex instead of the rgba because the rgba wasn't highlighted properly in my code editor. see screenshot http://cl.ly/image/3G302O3F1W3W. So I automatically switch to Hex without even thinking about the actual issue.

This second patch translates the rgba to a hex colour so the placeholder can properly have iamtakashi previous style applied but in a hex format that can be read by the placeholder.

Also I did increase the opacity of the border around the search bar as I though it was a little lost as well.

@RDall
5 years ago

Translates rgba to hex for placeholder extension

@RDall
5 years ago

Disregard last diff I hadn't committed the local change I made and when I ran the diff it took from the previous version.

#5 in reply to: ↑ 4 @iamtakashi
5 years ago

Sorry if I wasn't clear but we should change all input and textarea in the sidebar if we change it.

Anyway, after a bit of research, it turns out placeholder text gets lower opacity by default from Firefox 19 and that was why it appeared darker than how it should be. So the appropriate fix is explicitly setting opacity: 1; for ::-moz-placeholder Ref.

I lighten a bit of the placeholder text on top of that, but for the border, I don't want lighten it too much so I changed it to the same with the color of the border used in the sidebar: rgba(255, 255, 255, 0.2) and rgba(255, 255, 255, 0.3) for hover.

@iamtakashi
5 years ago

#6 @lancewillett
5 years ago

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

In 26116:

Twenty Fourteen: fix low-contrast input elements in Firefox by explicitly setting opacity: 1 for the placeholder text. Also brighten the border styles a bit. Props iamtakashi, fixes #25930.

#7 @alexdobras
4 years ago

  • Type changed from defect (bug) to feature request

is there a way to change the placeholder "Search..." with anything else? Please give me a short how-to. thanks!

#8 @RDall
4 years ago

  • Type changed from feature request to defect (bug)

Alex

You might want to ask your question in the WordPress.org support forums and research in the codex on child themes.

Trac is not for support requests but is for building WordPress itself. But it's totally possible with a child theme. Good Luck.

Note: See TracTickets for help on using tickets.