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!

To add a little to Monique's suggestions, here are a couple of CSS snippets we used for our restyled search.

Large search box with rounded corners:

#lia-body .lia-content .lia-component-quilt-header .lia-component-common-widget-search-bar input.search-input {
  height: 80px;
  width: 849px;
  font-size: 40px;

  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border-width: 1px;
  border-color: #cdcdcd;
}

Rounded corners will degrade nicely to square corners on older browsers.

Restyled search button:

#lia-body .lia-content .lia-component-quilt-header .lia-component-common-widget-search-bar .lia-button {
  height: 80px;
  width: 100px;
  background-color: #ed1556;
  border-color: #ed1556;
  background-image: url(/html/assets/search.png);
}

You can see the full thing here: http://forums.jawbone.com

Hi MoniqueL ,

Regarding what you say 

' First you'll have to hide the dropdown menu (lia-search-form-granularity) with some "display:none" ', where can I edit this part? in XML  or css? 

Thanks,

Nad

nad_dyra303 Nowadays you actually do not need to hide the granularity dropdown via CSS. Instead you can use the component parameter 

 hideGranularity="true"

See my reply here: https://community.khoros.com/t5/Developer-Discussion/Custom-Search-Components/m-p/558126/highlight/true#M16556