Search Widget Customization

  • sylvia



    Looking for some quick advice. The search field in the search widget does not display as the same width between different browsers. I don’t see a CSS class for this in the graphene theme….anyway I can specify the width of the search field so that it does not fluctuate between browsers….(because of where i placed it in my theme…the changing width affects my layout with some browsers)

    Also…the search button….anyway I can use CSS to use my own image of search button to replace the current…as that also currently changes between browsers…..thanks as always!!



    The width of the search bar is specified by these CSS rules:

    #top_search input {
    background: url("images/sprite_master.png") no-repeat scroll -69px top #FFFFFF;
    border: medium none;
    color: gray;
    float: left;
    height: 17px;
    padding: 3px 7px 2px 5px;
    width: 148px;

    What’s your website url?



    Josh, thanks for the reply!

    I’m not by my computer so I can’t confirm this…but I think the CSS you have listed is for the top search bar. I am referring to the search bar in the search widget. I don’t think the CSS is the same for both….unless I’m mistaken…


    Kenneth John Odle


    Use Firebug to figure out the unique ID of the widget in question. Then use code like this:

    #search-3 input {style elements here;}
    #search-3 button {width:40px;}

    #search-3 is the ID of the widget on my test blog; you’ll need to replace it with whatever ID you’re dealing with. I could give you more specific information, but your site remains hidden!

    You can style form elements, by the way. Go to my main site ( and pick a stylesheet such as “Night Sky” or one of the “Terminal” ones to see this in action. It’s actually pretty cool.


    Kenneth John Odle


    I forgot to mention: you’ll want to go to the “Contact” page to see an example of a form.




    This worked great, thanks a lot!!

    One more question….the default for the search widget is that it displays the word “search” in the search bar. Would you know how I could hide this?? I don’t want the word “search” to appear in the bar….because it already appears on the search button and seems redundant. Thanks Ken!


    Kenneth John Odle


    I don’t know how to do it with the default search widget, but you can always “view source” and copy the code from the search widget and paste it into a text widget. In this case, you would want to change




    which will make the box appear empty.

Viewing 7 posts - 1 through 7 (of 7 total)

  • You must be logged in to reply to this topic.
Graphene Themes Forum