Support » Themes and Templates » child theme of 2011 – getting "Search" placeholder to another color

  • Resolved faddah

    (@faddah)


    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

Viewing 15 replies - 1 through 15 (of 26 total)
  • In the child themes style.css to change the font color:

    #branding #s {
       color: #000;
    }

    To change the background on focus:

    #branding #s:focus {
       background-color: #FF0000;
    }

    If you are using the dark theme option for your child theme then add the !important;

    #branding #s {
       color: #000 !important;
    }

    HTH

    David

    hi david,

    yes, i had tried that before, as that is in the “Change Search Bar Color” forum post i read & mentioned before. that doesn’t work for the “Search” placeholder — in the apple webkit on google chrome & safari. it seems to work in firefox 4 – 7, though. but i want it working anywhere. i think the —

    #branding #s { ...

    and particularly the —

    #branding #s:focus { ...

    …only work once you click inside this HTML5 search widget. i need it to change the color when it just loads on the page to be a darker color (i like #303030), without ever mousing-over or clicking on it. see the example i have above of the screenshot image that shows you how gray and unreadable it is in the background.

    in any case, i made your changes and no, as it didn’t before, it’s still not working. thank you for trying, though.

    best,

    — faddah wolf
    portland, oregon

    so putting this out there again — anyone have any ideas? i appreciate david of digital raindrops response, but it was stuff i already said i tried and still didn’t work. anyone with any idea on how to get this placeholder Search text in the HTML5 Search widget to another color? any help, please, would be most appreciated.

    best,

    — faddah wolf
    portland, oregon

    esmi

    (@esmi)

    Forum Moderator

    Site url?

    esmi,

    thank you for responding.

    the site is ialsowent.com , however, it is in maintenance mode as i want to get a whole bunch of other things tweaked before i publish & release for public viewing/consumption.

    if you scroll up to my first post, i have the url to a screen shot of the site which shows what i’m talking about, plus all pertinent code.

    if you still need to look at the site, please post back and i’ll create a log-in for you or something like that. if we go this route, please share a contact method for you so i can send you log-in & password so it’s not posted here publicly.

    thank you for looking into this.

    best,

    — faddah wolf
    portland, oregon

    esmi

    (@esmi)

    Forum Moderator

    We really need to be able to see the site if we are to offer any practical suggestions. Otherwise, like Digital Raindrops, we’re just shooting in the dark.

    hi again, esmi,

    thank you for writing back.

    i’ve sent you a log-in to the address posted on your profile.

    please take a look when you have a chance and tell me what you think.

    thank you again, in advance, for this help.

    best,

    — faddah wolf
    portland, oregon

    esmi

    (@esmi)

    Forum Moderator

    The text in the WP Search box showed up as very dark grey for me immediately. And on checking the relevant CSS, I can see that it’s clearly set to:

    #branding #s {
        color: #303030 !important;
    }

    If you’re not seeing this, then could be related to the fact that you’re running WP Super Cache.

    esmi,

    thank you for looking this over.

    pardon my nØØb question, but i don’t understand how wp super cache is related to the HTML5 Search box widget? And if it is, are there settings i can play around with in wp super cache it that will cause the change i want?

    yes, per my previous discussion with david, #branding #s is set to #303030, but may i ask which browser you used to view it with above? if you read my original post above, i say that it does work in firefox 7 (mozilla’s implementation of HTML5) but i see the problem in the latest versions of google chrome & apple safari (apple’s webkit implementation of HTML5). did you try it with the browsers that i say are problematic here?

    please advise at your convenience and thank you again for looking at this.

    best,

    — faddah wolf
    portland, oregon

    esmi

    (@esmi)

    Forum Moderator

    i don’t understand how wp super cache is related to the HTML5 Search box widget?

    You may be seeing cached (old) versions of some of your pages. So, you make a change but when you go to view the changed page, you don’t see the change because you’re not viewing the page itself. You’re viewing an old copy of the page. Does that make some kind of sense?

    may i ask which browser you used to view it with above?

    Firefox 6 but I’ve just checked in IE9 and it’s not showing there. My guess is that you have a CSS error somewhere that is stopping the appropriate style from being applied correctly, But with the site behind a maintenance page, it’s not possible to run it through the validators. I can only suggest that you try using the file upload option on the W3C CSS Validator.

    Ditto for the page markup. Run it through http://validator.w3.org/

    hi esmi,

    i really appreciate this help.

    as to wp super cache – can i turn it off, refresh the site, and turn it back on again and that might solve it?

    and just to be clear, are you saying in ie9, you are seeing the problem i describe, or ie9 is not showing the problem, as in it looks very dark gray (#303030)?

    after getting specifics on this from you, i will try the validator.

    thank you.

    best,

    — faddah wolf
    portland, oregon

    esmi

    (@esmi)

    Forum Moderator

    Check the documentation for wp super cache. There are ways around it – although, at present, you could look at disabling the cache altogether as you’re hardly going to need caching since no one can really access the site.

    are you saying in ie9, you are seeing the problem i describe

    I’ve just re-checked my unmodified copy of Twenty Eleven in IE9 and I was mistaken. That search text doesn’t show at all in IE – probably due to a javascript issue.

    esmi,

    thank you again. one last thing — if you have google chrome or safari, could you try in them, just to see if you see what i’m seeing. i ask because another wp/web dev friend of mine looked at it before i ever posted here, and saw the same think i am in chrome & safari and neither of us could figure out a way around it.

    if you can’t because you don’t have those browsers, i understand. i really do appreciate all the help you’ve given.

    best,

    — faddah wolf
    portland, oregon

    hi again, esmi,

    so i deactivated wp super cache and emptied the cache in my safari browser and reloaded the page. i’m still getting the old darkGray (#A9A9A9), not the super dark gray i want in that Search field (#303030).

    to make sure, i launched a new instance of the latest version of google chrome, went to the site… and this browser, which had never been to the site before, is also seeing the “Search” placeholder as #A9A9A9, not #303030.

    so i’m at a loss.

    again, i don’t think this was a cache or w3 validation issue — i’m just child theming selectors direct from the vanilla twentyeleven theme (that theme itself, if you run it through w3 validator, does not pass muster very well, so it’s hard to parse out what my error might be vs. what comes up in w3 validator). i really think this has to do with how google chrome & apple safari using webkit parse HTML5, as opposed to how firefox 7 using mozilla (which sees the #303030 child theme change just fine) parse the HTML5. this is evident in this bit of code relating to it in the vanilla twentyeleven style.css —

    #branding #s {
    	float: right;
    	-webkit-transition-duration: 400ms;
    	-webkit-transition-property: width, background;
    	-webkit-transition-timing-function: ease;
    	-moz-transition-duration: 400ms;
    	-moz-transition-property: width, background;
    	-moz-transition-timing-function: ease;
    	-o-transition-duration: 400ms;
    	-o-transition-property: width, background;
    	-o-transition-timing-function: ease;
    	width: 72px;
    }

    again, doing a child theme where you add to this —

    #branding #s {
    color: #303030;
    }

    … works in firefox 7 (mozilla), but not in google chrome or apple safari (webkit).

    so again i ask, please — where do i go to change the placeholder widget color, as #branding #s will not do it?

    please advise at your convenience and thank you again.

    best,

    — faddah wolf
    portland, oregon

    Hi faddah,
    I have the same as you it looks to be browser specific.

    If you select the search in chrome right mouse and Inspect Element, you will see a searchengine.js which I do not see in FireFox, it might be something in there?

    David

Viewing 15 replies - 1 through 15 (of 26 total)
  • The topic ‘child theme of 2011 – getting "Search" placeholder to another color’ is closed to new replies.