Do you know how to use HTML, PHP and CSS?
Thread Starter
Rokgoo
(@rokgoo)
Hi esmi, I am not a “code-freak” but I can handle HTML, PHP and CSS.
In that case, you should be able to create a searchform.php template file in your child theme using the parent’s copy as a starting point.
Thread Starter
Rokgoo
(@rokgoo)
I know that I need a new searchform.php in the child theme but I don’t know what do I need to add/modify in the new file. Can you tell me the code which I need to add to the searchform.php?
Start by copying the parent’s file into the child theme.
Thread Starter
Rokgoo
(@rokgoo)
Copying the parent’s file into the child theme is done. I understand that I need an “input” command line to the code to display the submit button. Can you help me with that?
As you will see, there is actually a submit input in the searchform.php template file. You can now add a different class and/or id to the input and then use your child theme’s CSS to style it in any way that you want.
Thread Starter
Rokgoo
(@rokgoo)
Can you please write me a sample code line for “Submit-Button”?
make searchform.php in theme folder and place that code in it
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
<div>
<input class="text" type="text" value=" " name="s" id="s" />
<input type="submit" class="submit button" name="submit" value="<?php _e('Search');?>" />
</div>
</form>
Change whatever you want !
I found that the “Search” button was already there but hidden by this css:
.widget-area #searchsubmit {
display: none;
}
I replaced it with:
.widget-area #searchsubmit {
display: inherit!important;
}
Now I can’t figure out why it the search button appears below the search box in the left side bar widget but not on my error page. I know to just hit Enter to search but some of my clients got confused. I can’t find anything causing it in searchform.php. (See at http://bannockcountyidaho.com/courts44 )
I am guessing that it is controlled by the side bar widget css but no matter what I change it won’t move up next to the box. I have tried:
.widget-area .searchFormInput {
width: 75%!important;
display: inherit!important;
}
.widget-area .searchFormContainer div {
display: inherit!important;
}
.widget-area #SearchForm {
display: inherit!important;
}
Please help! Thanks!
I fixed it myself. Maybe it will help someone else.
.widget-area #searchsubmit {
display: inherit!important;
float: right;
margin-top:-36px;
margin-left:10px;
padding: 4px 5px 5px;
}
.widget-area .searchFormInput {
width: 80%!important;
display: inherit!important;
}