WordPress.org

Support

Support » How-To and Troubleshooting » Customize Search Form CSS-

Customize Search Form CSS-

  • Hello- I am using The default Kubrick template, and I’ve had no difficulty customizing the appearance of the Search text box and the Search submit button in the sidebar. However, when an unsuccessful search is submitted and the new page displays in the main column, “No posts found. Try a different search?” the properties of the search box and Submit button remain “unchanged,” that is they do not conform in appearance to the CSS definitions of the sidebar search elements. I’ve tried in vain to change the CSS for everything I can find relating to Forms and Search, but nothing seems to affect the problem I’m having. (Both in IE and Firefox)… I would have thought the CSS class “searchform” would apply to what I’m trying to change, but no luck! Any suggestions would be very much appreciated!
    Thanks! DB!

Viewing 6 replies - 1 through 6 (of 6 total)
  • To clarify: I’m trying to determine why the searchform CSS seems to work only in the sidebar, and not in the main part of them page???
    Thanks… DB~

    Any ideas, folks?
    DB~

    You have to change the styles in your stylesheet,
    you have to put the classes in your searchform.php and
    wherever you put the whole search form (not <?php include (TEMPLATEPATH . ‘/searchform.php’); ?>)in a template you also have to put the classes in it.

    If you have done this and it doesn´t work, please give us the url to this site.

    Evita- I’m slightly confused. Are you saying that I need to add the classes CSS definitions to the actual PHP file?
    I’m testing locally so unfortunately I can’t give you the site URL.
    Thanks, Dennis~

    <form method=”get” id=”searchform” action=”<?php bloginfo(‘home’); ?>/”>
    <div><input class=”your class” type=”text” value=”<?php echo wp_specialchars($s, 1); ?>” name=”s” id=”s” />
    <input class=”your class” type=”submit” id=”searchsubmit” value=”Search” />
    </div>
    </form>

    Hi DB,

    I’ve the opposite problem. I’ve been able to style both search boxes but only the main search button. I’m using this CSS,

    /*Code to change the search form textbox colour styles in right column*/
    #sidebar #searchform #s {
    	width: 108px;
    	padding: 2px;
    	color: #000;
    	background: #FFCCF5;
    	border: 1px solid #FE4FDC;
    	}
    
    /*Code to change the main search form textbox colour styles*/
    #searchform #s {
    	width: 158px;
    	padding: 2px;
    	color: #000;
    	background: #FFCCF5;
    	border: 1px solid #FE4FDC;
    	}
    
    #searchsubmit {
    	color: #000;
    	border: none;
    	width: 93px;
    	height: 25px;
    	background: #fff url('images/search_btn.jpg') no-repeat bottom center;
    	}

    Problem is the Sidebar search button doesn’t have an ID associated with it and I can’t find where this is to change it. Updating searchform.php has no effect!

    It would be great if you could let me know how you solved it.

    Many thanks,

    Adrian

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Customize Search Form CSS-’ is closed to new replies.
Skip to toolbar