Forum Discussion

nathan's avatar
nathan
Executive
13 years ago

styling the search bar

By default the search bar looks like this:

NormalSearchForm.png

 

We would like it to look like this:

NewSearchForm.jpg

 

The structure of the HTML for the existing search form is quite complex, so I'm struggling to find a way to achieve the desired affect using CSS.

I could create a custom component, but I don't know how to integrate it with the search function.

 

Any help/suggestions are much appreciated.

  • MoniqueL's avatar
    MoniqueL
    Lithium Alumni (Retired)
    12 years ago

    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!

     

     

     

    • ghayman's avatar
      ghayman
      Guide
      12 years ago

      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