styling the search bar

Hi Nathan,

So you have the option to style the search bar using css or JS, depending on how much control you want over consistency for older browsers. I personally reccomend css3 with some added styling for graceful degradation.

Remember to make sure your casses are specified to affect the specific search bar you want to style, so that it doesnt conflict with the search bar on the search page,  unless you want to change that as well.

First you'll have to hide the dropdown menu (lia-search-form-granularity) with some "display:none"

Then you can some css3 techniques to create the rounded border radius, gradient and drop shadow. This site is pretty helpful for generating the css that you can copy & paste: http://css3generator.com/ You could aslo just replace the bar with a png image of the desired search bar (minus the text and magnify glass)

Then you'll need to adjust the css to hide the text for the search button, and replace it with the iamge of the magnify glass. The css should look similar to this but may need some tweaking on your part:

#lia-body .lia-content .lia-quilt .lia-component-common-widget-search-form .lia-form .lia-button-wrapper input {
    background: url("<image-path.png>") no-repeat scroll center center transparent;
    text-indent: -9999px;
    width: 40px;}

 Then you'll need to add/edit the text string that appears in the search bar inside studio > text editor see this post for info on that

https://lithosphere.lithium.com/t5/Customer-Connection/Search-Box-Default-Text/m-p/21120#M1255

Hope that helps answer your question!