+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / How to style search box

How to style search box

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