I'm using wordpress twentyten theme.
as well as in i have set search widget.
Now i wish to personalize my search option which seem like,
and i wish to chane it like,
Can anyone let me know where i must change?
Since I Have can't begin to see the site I'll demonstrate how you can decipher it using Google Chromes Developer Tools
- Open your localhost to see your WordPress install
- Right click within the input search box and choose "Inspect Element"
- Indexed by the best column you will see the CSS styles connected using the TwentyTen Theme. You will also observe that there's a method.cascading stylesheet file by having an underline under it that you simply ca click. The CSS inspector teaches you which lines are referencing and you will make alterations in the best pane and find out them survive your website.
- Because you want the input boxes background color transformed to grey you will need to double click within the input boxes style and alter it to #e4e4e4.
- Next you will want to alter the color selector to black because the color will not appear having a grey background.
- Alter the padding to 0px
- Alter the width to 144px
- Repeat exactly the same steps above by choosing another aspects of the code you would like re-situated and styled.
- Finally it can save you the alterations by clicking the Resource Tab, expand Style Sheets and Right Click Style.css and select Save As and save the design and style sheet on the top of the current style sheet.
I actually do however suggest that you produce a WordPress Child Theme rather than modifying the TwentyEleven Theme Directly if improve your WordPress site (which happens frequently) all your changes is going to be lost.
The php for that wordpress search form is
<?php get_search_form(); ?> which creates the following within 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 must find #searchform inside your theme's stylesheet after which personalize the css after that. If you want more help try installing firebug and taking advantage of it to examine the present Css.