Forums

How to customize search box in sidebar? (9 posts)

  1. Neurowave
    Member
    Posted 4 years ago #

    If you check out my site, http://www.streetmotion.net, I can't quite get the search box in the sidebar to follow my template.

    I tried using searchform.php but it doesn't seem to affect it. Any ideas?

  2. StrangeAttractor
    Member
    Posted 4 years ago #

    A searchbox is basically a simple HTML form, which can be styled through the CSS stylesheet.

    There are limitations to what CSS can do with a form, and different browsers will display them somewhat differently, but you can do things like change the background color of the field, put a border around it, etc. The button can also be styled, although Safari will always replace it with its native button.

    Obviously, you need to know something about CSS to do this. If this isn't something you want to spend time learning (although I highly recommend it for anyone customizing their WordPress theme), you'll have to find someone who knows CSS.

  3. Neurowave
    Member
    Posted 4 years ago #

    No it's not that. I know how to use CSS, I used it extensively in my theme.

    Now if you could tell me what class I have to add to my style sheet to fix up that box, that'd be helpful.

  4. whooami
    Member
    Posted 4 years ago #

    Look at your source.

    If you know how to use CSS then you ought to know how to view source in your browser.

    Right?

    <form id="searchform" method="get" action="http://www.streetmotion.net">
    <div>
    <input name="s" id="s" size="15" type="text">
    <input value="Search" type="submit">
    	</div>
    	</form>

    http://codex.wordpress.org/Finding_Your_CSS_Styles

  5. Neurowave
    Member
    Posted 4 years ago #

    Still, I'm trying to change the sizes and colors on both the search box and the submit button.

    I see I can just add css info for the search box, but there's no class on the button.

    It's the deafult search widget for the sidebar.

  6. whooami
    Member
    Posted 4 years ago #

    then edit the widget, and add a class.

  7. Neurowave
    Member
    Posted 4 years ago #

  8. whooami
    Member
    Posted 4 years ago #

    ahhhh, then look inside wp-admin/widgets.php

    function wp_widget_search($args) {
    	extract($args);
    ?>
    		<?php echo $before_widget; ?>
    			<form id="searchform" method="get" action="<?php bloginfo('home'); ?>">
    			<div>
    			<input type="text" name="s" id="s" size="15" /><br />
    			<input type="submit" value="<?php echo attribute_escape(__('Search')); ?>" />
    			</div>
    			</form>
    		<?php echo $after_widget; ?>
    <?php
    }
  9. asle
    Member
    Posted 3 years ago #

    This must be a well hidden secret. Nobody wants to answer, do this and that with CSS, bla,bla. Of course, don“t touch it you just want to style it. Use CSS! But, just show me the code! I want to use a jQuery input box hint: http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/
    So to really edit the search form structure you find it here:
    /wp-includes/general-template.php

    In WP 2.7 it is in function get_search_form() and edit line 113.
    Hope that saves some time :-)

    /asle

Topic Closed

This topic has been closed to new replies.

About this Topic