WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] child theme of 2011 - getting "Search" placeholder to another color (27 posts)

  1. faddah
    Member
    Posted 2 years ago #

    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

  2. Digital Raindrops
    Member
    Posted 2 years ago #

    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

  3. faddah
    Member
    Posted 2 years ago #

    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

  4. faddah
    Member
    Posted 2 years ago #

    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

  5. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    Site url?

  6. faddah
    Member
    Posted 2 years ago #

    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

  7. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    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.

  8. faddah
    Member
    Posted 2 years ago #

    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

  9. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    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.

  10. faddah
    Member
    Posted 2 years ago #

    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

  11. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    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/

  12. faddah
    Member
    Posted 2 years ago #

    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

  13. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    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.

  14. faddah
    Member
    Posted 2 years ago #

    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

  15. faddah
    Member
    Posted 2 years ago #

    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

  16. Digital Raindrops
    Member
    Posted 2 years ago #

    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

  17. faddah
    Member
    Posted 2 years ago #

    hi again, esmi, david, all,

    well, i tried looking over what david indicated in chrome.

    first of all david, where in the inspect element developer tool window are you seeing this "searchengine.js"? the main left pane? the small right pane? i have used inspect element on the search box in chrome, i've used the web developer extensions and firebug light, and i don't see "searchengine.js."

    but i went searching for such a javascript file throughout all of my wordpress 3.2.1 install, in all of the base install and in the twentyeleven parent them (i don't have any javascript yet in my child theme). throughout all, there is no "searchengine.js" in there.

    i also opened and examine the package content of the google chrome app, and found nothing in there either named "searchengine.js."

    so i'm at a loss on were to look for this file to make any changes to it that will change the color in chrome's webkit.

    any further help here would be appreciated. for now my only workaround is to make the search box background a different color so you can see the "Search" placeholder text a wee bit better, but the weak gray there still is not all that readable.

    best,

    — faddah wolf
    portland, oregon

  18. Digital Raindrops
    Member
    Posted 2 years ago #

    Hi faddah,
    The script is one that my AGV anti virus software loads (searchshield.js and searchengine.js), so it is not part of the theme or WordPress.

    It must be something that the browser is doing, it almost looks like the text is turned into an image, whatever I try I cannot find it or change it.

    Regards

    David

  19. faddah
    Member
    Posted 2 years ago #

    hi david & esmi, et al.,

    ah, so i'm not crazy for not seeing "searchengine.js" in there, eh? ;)

    i do not think this is an image, because when you do firebug, web developer or inspect element on the search field, you get:

    Pseudo::-webkit-input-placeholder element          user  agent  stylesheet
    input::-webkit-input-placeholder, isindex::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
         color: darkGray;
    }

    its text as it gives that darkGray color (#A9A9A9). so it's something in a hook somewhere in either base wordpress 3.2.1 or twentyeleven theme that make those hooks to webkit (google, safari) or mozilla (firefox, etc.).

    wish a dev or dev rep for WP would chime in as to what is going on here. could be a bug in how the HTML5 is being handled.

    best,

    — faddah wolf
    portland, oregon

  20. PenceLdesigner
    Member
    Posted 2 years ago #

    This has been driving me crazy for a couple weeks and I finally figured it out. You're right about it being an HTML5 issue. I added the following to my CSS and now header searchbar input styling is under control:

    #branding input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #yourcolor;
    }
    #branding input:-moz-placeholder, textarea:-moz-placeholder {
    color: #yourcolor;
    }

    Note the double colons for webkit and single for moz. You can read more about styling HTML5 placeholder text here: http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/. Hope this helps others as much as it helped me!

    Cheers,
    L.

  21. faddah
    Member
    Posted 2 years ago #

    yes! yes! yes! that did it!

    thank you, thank you, thank you, “L.” i've banged my head over and over on this one, and had given up all hope as it appeared no one was responding to what i was seeing here on the forums in this post/thread. but you came through! i'll go back now and read the referenced link on html5 placeholder styling to fill out what i didn't know. but, oh, thank you for this.

    i still think this should be filed as some sort of bug or feature enhancement in wp 3.2.1 & the 2011 theme. where does one go to do that?

    thank you again. takes some time, but the wp-dot-org forums really do come through, if you're patient and keep at it.

    best,

    — faddah wolf
    portland, oregon

  22. Explorz
    Member
    Posted 2 years ago #

    Hi,

    This was tremendously helpful! Thank you.

    I would like to also change the border color of the search box. Possible?

    As well, the search widget in my sidebar doesn't function at all like the search bar in the header. Any ideas perhaps why not?

    http://truenorthalliance.com/blog/

    Thanks

  23. sasquotch
    Member
    Posted 2 years ago #

    Thanks so much PenceLdesigner and faddah - this search box text issue was really doing my head in!
    Explorz: Just change the border-color in this bit of code:

    #branding .only-search #s {
    background-color: #ffe7c4;
    border-color: #ff9800;
    color: #000;
    }

  24. Explorz
    Member
    Posted 2 years ago #

    Saradiop,

    I wish that would do it, but it doesn't have any impact.

  25. faddah
    Member
    Posted 2 years ago #

    @Explorz & @SaraDiop,

    so here's the code i extended in my child theme of twentyeleven —>

    #access li:hover > a, #access a:focus {
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eddcca), to(#eddcca)); /* Older webkit syntax */
    	background: -webkit-linear-gradient(#eddcca, #eddcca);
    	background-color: #eddcca; /* Show a solid color for older browsers */
    	background-color: -moz-linear-gradient(#eddcca, #eddcca);
    	background-color: -o-linear-gradient(#eddcca, #eddcca);
    	color: #373737;

    so to change the border color, you could add to that block —>

    ...
    	border-color: -webkit-linear-gradient(#ff9800, #ff9800);
    	border-color: #ff9800; /* Show a solid color for older browsers */
    	border-color: -moz-linear-gradient(#ff9800, #ff9800);
    	border-color: -o-linear-gradient(#ff9800, #ff9800);
    ...

    give that a try, or play around in some of the other #access selectors.

    — faddah

  26. joe1977
    Member
    Posted 1 year ago #

    I searched all day for this solution. It works beautifully.

    Why was it so hard to find? Can we bump this up some how?

    Also, since this involves the default twenty eleven theme, why can't this information be found anywhere in the documentation? Like here for instance?

    This is the type of thing that drives experienced WordPress developers, like PenceLdesigner, faddah and myself, absolutely nuts! If you are going to fundamentally change the way a DEFAULT theme is structured, it should be included in the documentation.

  27. Ron Gallant
    Member
    Posted 1 year ago #

    Thank you!!!!
    Still haven't figured out the :focus font color for the placeholder.

Topic Closed

This topic has been closed to new replies.

About this Topic