Friday, January 7, 2011

How to change default search box size?

By default Microsoft uses the following styles for the input box.

image

 

If you want to modify the width of the input box, you have to do either one of the following option.

Using Custom Master Page: I preferred this option since almost everyone uses there own master page to specify their corporate branding and we can easily override the width by defining custom styles in master page. Add the following code at the end of the Header section

<style type="text/css">
        /* Change the Search box size */
        .s4-search input.ms-sbplain
        {
            width: 500px !important;
        }
    </style>

Using Feature: Choose this option if you are using out of the box master page and desperately want to change the size of search box. Since search box is a delegate control we can easily customize. so i am not going into the details . You will find lot of articles when you search online on this topic and i found helpful as a starting point.

0 comments:

Post a Comment