hi all,
long time user, first time forum poster. ;)
what i'm trying to do is simple: i'm extending a child-theme from 2011 and changing it up a bit. to match a picture that will eventually be in the header, i've changed the background of the body to a yellow-orange color (background: #f28610;). consequently, the search box in the upper left, an HTML5 widget that does a WebKit sliding thing when you click on it, has placeholder text, "Search," that is now too gray to be seen properly.
see an example image of what i'm talking about here: <img src="http://ialsowent.com/files/ialsowent_screenshot.png" alt="Screenshot depicting ialsowent.com child theme and grayed Search placeholder text" />
here's the rub — i can't find anywhere in the original twentyeleven parent theme files where it gets this text color attribute from so i can extend and change it. i have also found out that this is an HTML5 thing this search box is doing, but don't know how to change it that way. i've search in style.css, functions.php, search.php &
using extensions in browsers like firebug or web developer, i find (and this is the HTML5 thing) that its a virtual attribute cobbled together by the code. the attribute shows as —
<input type="text" class="field" name="s" id="s" placeholder="Search">
which makes sense as that is put together on line 12 of the searchform.php file.
and the virtual code putting it together shows as —
Pseudo::-webkit-input-placeholder element user agent stylesheet
input::-webkit-input-placeholder, isindex::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: darkGray;
}that color: darkGray; as a web color is also #A9A9A9;. and for the life of me i can't find in any of the twentyeleven theme code files where this -webkit-input-placeholder is so i can extend in the child theme and change that annoying darkGray web color.
i searched the forums and found this posting on "Change Search Bar Color" in the search form, but this is for after you click inside the search HTML5 widget and give it focus and it slides out. yes, then the text color looks fine on a now white background in that field. it's before, with my new yellow-orange body background, you can't read it. and i had already tried all the various class and id css hooks they suggested. here's the wrinkle: when i had tried those hooks before, they made the font the darker color i wanted, but only in firefox 4 - 7 (mozilla), in the latest versions of google chrome or safari, no-go, still the faded darkGray web color. i think this is because firefox is, of course, using mozilla's implementation of this HTML5 widget behavior, and google chrome & safari use apple's webkit HTML5 implementation. this was confirmed when i also searched and read this post by Jane Wells, with developer responses, on "Make WordPress Accessibility" regarding the new HTML5 elements in the twentyeleven theme. in there the developer responses talk about the search form, its being HTML5, and its inconsistencies from mozilla to webkit.
so that's my research, but i still haven't come up with where, in the twentyeleven theme, or in HTML5, i need to extend in the child theme and change that frustrating darkGray color. so any help, please, would be appreciated. thank you in advance.
best,
— faddah wolf
portland, oregon
