Return to Support

Search Widget Customization

Home Forums Graphene WordPress theme Support Search Widget Customization

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #2767
    sylvia
    Member

    Hi,

    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!!

    #21838
    Josh
    Member

    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?

    #21839
    soapy
    Member

    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…

    #21840

    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 (http://www.kjodle.net/) and pick a stylesheet such as “Night Sky” or one of the “Terminal” ones to see this in action. It’s actually pretty cool.

    #21841

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

    #21842
    soapy
    Member

    Ken,

    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!

    #21843

    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

    value="Search"

    to

    value=""

    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.