Changing search form width

  • Resolved robgrayson

    (@robgrayson)


    18 years, 2 months ago

    I recently posted a query about how to reduce the width of a drop-down menu box after changing the size of the right-hand column in the Autumn Concept theme. I now have a similar problem with the search form which appears at the top right of the page: I need to reduce the width of the form to stop the search button being pushed on to another line. Despite using a web developer’s toolbar to identify the search form (I believe it’s called “#searchform”), I can’t find any references to its size or position in the stylesheet, nor in index.php or any other PHP file editable within WordPress.

    You can see my site here. I’d be very grateful for any help.

    Thanks,

    Rob

Viewing 4 replies - 1 through 4 (of 4 total)
  • Sridhar Katakam

    (@srikat)

    18 years, 2 months ago

    <div>
		    <input type="text" class="field" id="s" name="s" value="Looking for something?" style="float:left; width:190px";/>
            <input type="image" value="Search" id="searchsubmit" src="http://www.graysonsinfrance.net/Test/wp-content/themes/autumn-concept-1_0/images/button_search.png" style="float:left;"/>
		  </div>

    You might want to put the styles in style.css.

    Thread Starter robgrayson

    (@robgrayson)

    18 years, 2 months ago

    Hi srikat,

    Thanks for your reply. But where do I find this code? I can’t find any code that sets the width of the search form. I’ve found code that looks like what you posted but without the “width” reference in both the header.php file and the searchform.php file. I tried adding the width reference into both of these, but nothing changes.

    I’m sure it’s obvious when you know how…

    Rob

    Sridhar Katakam

    (@srikat)

    18 years, 2 months ago

    Open your theme’s header.php in a text editor.

    Locate:

    <input type="text" value="Looking for something?" name="s" id="s" class="field" />
            <input type="image" src="<?php bloginfo('stylesheet_directory'); ?>/images/button_search.png" id="searchsubmit" value="Search" />

    Replace w/:

    <input type="text" value="Looking for something?" name="s" id="s" class="field" style="float:left; width:190px";/>
            <input type="image" src="<?php bloginfo('stylesheet_directory'); ?>/images/button_search.png" id="searchsubmit" value="Search" style="float:left;"/>

    Remember: Firebug and Windows grep are your detective friends.

    Thread Starter robgrayson

    (@robgrayson)

    18 years, 2 months ago

    Srikat,

    Thanks once again for your excellent help – sorted!

    Any ideas about why my posts are displaying in the wrong order? (See post here.) Note that I’ve updated to v 2.3.3 but no difference.

    Rob

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Changing search form width’ is closed to new replies.