More in this section
Forums / Designing & Styling / How to style search box

How to style search box

The forums are in read-only mode. In case that you want to directly contact the Progress Sitefinity team use the support center. In our Google Plus group you can find more than one thousand Sitefinity developers discussing different topics. For the Stack Overflow threads don’t forget to use the “Sitefinity” tag.
2 posts, 1 answered
  1. Dev
    Dev avatar
    18 posts
    Registered:
    18 Jan 2013
    18 Jan 2013
    Link to this post

    Hi,

    Can you please guide me on how to change the style of search widget. I was unable to find the search widget under Design->widget templates. All I want to do is hide the search button and apply some styles to the searchbox. I am new to sitefinity, so I was wondering if there is a place where I can go to view the markup of the widget and change its style (I dont have thunder installed) or even if there is a way where I write new styles to apply on top of the widget.

    Thanks,

  2. Arno
    Arno avatar
    249 posts
    Registered:
    08 Sep 2010
    18 Jan 2013
    Link to this post
    Hi Prashant,

    I don't think you can set a custom template for the search widget or anything like that. The search widget only renders a div containing two input tags. You can see that by right clicking on it in Google Chrome and choosing Inspect Element. I styled it by wrapping the widget in a <div class="search">. That allows me to set styles like this:

    .search input:nth-of-type(2) {
        height: 11px;
        background: url('search.png') no-repeat;
        border: none;
        position: absolute;
        margin: 8px 0 0 -16px;
    }
     
        .search input:nth-of-type(2):hover {
            cursor: pointer;
        }
    Answered
2 posts, 1 answered