Resizing the Search Bar Within Sidebar Widget

Today while working on another blog, I wanted to add a search bar to one of my sidebars. Thinking I’d just use the search bar within the SideBar Widget, I dragged it to the area I wanted it to show and should have been done. The problem I came across was the bar was too short to look pleasing and I also wanted the submit button on the same line, not under it.

Changing search bar size:

under Presentation, choose Theme-editor. In the theme editor the file we want to change is Stylesheet. Using your browser search (usually CTRL-F) search for the word search, clicking next until you find this code (or close)

        li#search #s {
	border: 1px inset #666;
	font-family: verdana, helvetica, sans-serif;
	font-size: 12px;
	margin: 0;
	padding: 2px;
	width: 45%; 

The width is what you want to change (shown as 45%). You may have to try a couple different sizes till the search bar fits the area you have it located.

Search Bar and Submit button on the same line:

This will take a bit more work. The file widgets.php, this is the plugin file found in the SideBar widgets plugin.

Change this code:

to this code (make it all one line)


Technorati Tags:


One Comment to “Resizing the Search Bar Within Sidebar Widget”

  1. Richard Curry 5 February 2007 at 5:22 pm #

    if you notice that changing these files isn’t doing anything, check to see if there is a searchform.php which can be taking control and you can make changes in that file

Leave a Reply