WordPress.org

Forums

Search Box - Adjust Width & Add Image (2 posts)

  1. nono5551212
    Member
    Posted 6 years ago #

    I included the search.php file to the header of a theme I'm using.
    I want the search box and submit button on the same line.
    See my problem at http://www.fusehouse.com/press.2.7/

    1) What syntax in the search.php file can i use to adjust the size of the text box?

    FIGURED THIS PART OUT
    2) What syntax in the search.php file can i use to use a picture instead of the submit button

    <form
       action="<?php bloginfo('home'); ?>/" method="post" id="srch-frm">
       <div class="search">
       <input type="image" value="Search" src="http://www.fusehouse.com/press.2.7/wp-content/themes/Fun.Theme/images/search.png" />
       <input type="text" value="" class="textfield" name="s" id="s" />
    </div>
    </form>

    Any help you can provide would be greatly appreciated.

  2. nono5551212
    Member
    Posted 6 years ago #

    I Figured both of these out.

    1) Adjusting the size of the text field can be controlled through you Style Sheet (CSS)

    .textfield
    {
      width: 160px;
      font-family: arial, verdana, sans serif;
      font-size: 11pt;
      font-weight: bold;
      color: #000000;
      padding: 3px;
      background: #E7E9E4;
      border: 1px Solid #ffffff;
    }

    2) Using an image as a submit button. Include your searchform.php file to your header.php file like so

    <?php include (TEMPLATEPATH . '/searchform.php'); ?>

    Then add this code to your searchform.php

    <form
       action="<?php bloginfo('home'); ?>/" method="post" id="srch-frm">
       <div class="search">
       <input type="image" value="Search" src="http://www.fusehouse.com/press.2.7/wp-content/themes/Fun.Theme/images/search.png" />
       <input type="text" value="" class="textfield" name="s" id="s" />
    </div>
    </form>

Topic Closed

This topic has been closed to new replies.

About this Topic