How can i customize my search widget in wordpress twentyten theme?

2 Views

I am using wordpress twentyten theme.
and in this i have set search widget.

Now i want to customize my search option which look like,

Read More

enter image description here

and i want to chane it like,
enter image description here

Can any one tell me where i have to change?

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. The php for the wordpress search form is <?php get_search_form(); ?> which writes out the following in the browser

    <form method="get" id="searchform" action="http://www.your-url.org.uk/">
<div><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="Search">
</div>
</form>

    So you’d need to find #searchform in your theme’s stylesheet and then customize the css from there. If you need more help try downloading firebug and using it to inspect the existing Css.

  2. Since I can’t see the site I’ll show you how to figure it out using Google Chromes Developer Tools

    1. Open your localhost to view your WordPress install
    2. Right click in the input search box and select “Inspect Element”
    3. Listed in the right column you’ll see the CSS styles associated with the TwentyTen Theme. You’ll also notice that there is a style.css file with an underline under it which you ca click on. The CSS inspector shows you which line is referencing and you can make changes in the right pane and see them live on your site.
    4. Since you want the input boxes background color changed to gray you’ll have to double click inside the input boxes style and change it to #e4e4e4.
    5. Next you’ll want to change the color selector to black since the color won’t show up with a gray background.
    6. Change the padding to 0px
    7. Change the width to 144px
    8. Repeat the same steps above by selecting the other elements of the code you want re-positioned and styled.
    9. Finally you can save the changes by clicking the Resource Tab, expand Style Sheets and Right Click Style.css and choose Save As and save the style sheet on top of your current style sheet.

    I do however recommend that you create a WordPress Child Theme instead of modifying the TwentyEleven Theme Directly because if update your WordPress site (which happens frequently) all of your changes will be lost.