search

Ecotrust / ocs-wp

Worpress Implementation of ODFW's Oregon Conservation Strategy
Other
1 stars 0 forks source link

Homepage - have "SEARCH" appear in search bar #68

Closed ldford closed 8 years ago

ldford commented 8 years ago

Currently reads "Oregon Conservation Strategy". Replace with Search. Possible?

search-bar-homepage

dnseminara commented 8 years ago

@ldford in general, is it supposed to be 'SEARCH' or 'SEARCH THE OCS' in the search box. Currently, the default term is the latter.

ldford commented 8 years ago

It should just be "SEARCH"

willthemoor commented 8 years ago

@dnseminara Can we put a shim in for the homepage? For SEO/Accessibility we want the h1 on the homepage to be "Oregon Conservation Strategy" (or whatever the WP title is), not "Search". So for this one page, instead of putting the h1 in the search box, hide the h1 and put the string "Search" in directly from JS (or however).

Also, and this is minor but know it's on Josh's radar: the text "Search" in the box is supposed to be the lighter version of the current font.

dnseminara commented 8 years ago

Ok. I modified his search-box script instead of figuring out the timing/order of what came first with regards to overriding the search bar text. I also updated the font -family to look more like mock up in Laura's screenshot.

willthemoor commented 8 years ago

Thanks, Mr. Drew. Works great. Apologies: I didn't explain the font request fully. It's the lighter font only when it says SEARCH. In all other cases, it's the original heavier font. I've updated the CSS.

willthemoor commented 8 years ago

This is also set to the lighter font on a 404 page because it also says search. At the moment, those two pages are hard-coded into the CSS:

body.home, body.error404 {
  ::-webkit-input-placeholder {
     color: $greyDark;
     font-family: $headings-font-family-lighter;
  }
  ...

But if that proves problematic (we start adding additional WP body classes) we could also do it like:

[placeholder="SEARCH"]::-webkit-input-placeholder{
     color: $greyDark;
     font-family: $headings-font-family-lighter;
}
...