Styling a search button to fit my column.

I'd like a plain search button (that says search inside) and fills the width of the column here:

http://valentinafair.com/category/vip-posts/

I just want someone to be able to type in a query and hit return, so there would be no clickable button.

How do I do that? TIA

  • Ash

    Hello @[email protected]

    I hope you are well today and thanks for asking the question.

    Please add the following code in your theme's functions.php after wp_footer():

    <style>
    #searchsubmit{
    display: none;
    }
    #s{
    width: 100%;
    box-sizing: border-box;
    height: 35px;
    }
    </style>
    <script type="text/javascript">
    jQuery(function($) {
      $('#s').attr('placeholder', 'Search');
    });
    </script>

    This highly recommended to use a child theme in this case, as the changes will be lost when you will update the theme. You can learn more about child theme here: http://codex.wordpress.org/Child_Themes

    Hope it helps :slight_smile: Please feel free to ask more question if you have any.

    Cheers
    Ash

  • [email protected]

    This is the functions.php for my child theme. Where would I put the code? Thanks.

    <?php
    /*
    * Simple Child Theme generated by Ultimatum Framework
    */
    $theme = array(
    'theme_name' => 'VCT',
    'theme_slug' =>'VCT',
    );
    require_once( get_template_directory() . '/wonderfoundry/wonderworks.php' );

    function ult_child_script_style_loader() {
    wp_register_style( 'custom-style', get_stylesheet_directory_uri() . '/prb_css/prb.css', false, '1.0.0' );
    wp_enqueue_style( 'custom-style' );
    }
    add_action( 'wp_enqueue_scripts', 'ult_child_script_style_loader', 99 );

    add_action( 'intense_before_main_content', 'custom_intense_before_main_content' );
    function custom_intense_before_main_content() {
    echo '<div class="container_12"><div class="intense row" style="margin:0;">';
    }

    add_action( 'intense_after_main_content', 'custom_intense_after_main_content' );
    function custom_intense_after_main_content() {
    echo '</div></div>';
    }

  • Ash

    Hello there

    If you want to put in functions.php then please use the following code, I have add the code in following block:

    <?php
    /*
    * Simple Child Theme generated by Ultimatum Framework
    */
    $theme = array(
    'theme_name' => 'VCT',
    'theme_slug' =>'VCT',
    );
    require_once( get_template_directory() . '/wonderfoundry/wonderworks.php' );
    
    function ult_child_script_style_loader() {
    wp_register_style( 'custom-style', get_stylesheet_directory_uri() . '/prb_css/prb.css', false, '1.0.0' );
    wp_enqueue_style( 'custom-style' );
    }
    add_action( 'wp_enqueue_scripts', 'ult_child_script_style_loader', 99 );
    
    add_action( 'intense_before_main_content', 'custom_intense_before_main_content' );
    function custom_intense_before_main_content() {
    echo '<div class="container_12"><div class="intense row" style="margin:0;">';
    }
    
    add_action( 'intense_after_main_content', 'custom_intense_after_main_content' );
    function custom_intense_after_main_content() {
    echo '</div></div>';
    }
    
    add_action( 'wp_footer', 'search_btn_code' );
    function search_btn_code() {
        ?>
        <style>
        #searchsubmit{
        display: none;
        }
        #s{
        width: 100%;
        box-sizing: border-box;
        height: 35px;
        }
        </style>
        <script type="text/javascript">
        jQuery(function($) {
          $('#s').attr('placeholder', 'Search');
        });
        </script>
        <?php
    }

    Hope it helps :slight_smile: Please feel free to ask more question if you have any.

    Cheers
    Ash

  • Ash

    Hi there

    Try this:

    <?php
    /*
    * Simple Child Theme generated by Ultimatum Framework
    */
    $theme = array(
    'theme_name' => 'VCT',
    'theme_slug' =>'VCT',
    );
    require_once( get_template_directory() . '/wonderfoundry/wonderworks.php' );
    
    function ult_child_script_style_loader() {
    wp_register_style( 'custom-style', get_stylesheet_directory_uri() . '/prb_css/prb.css', false, '1.0.0' );
    wp_enqueue_style( 'custom-style' );
    }
    add_action( 'wp_enqueue_scripts', 'ult_child_script_style_loader', 99 );
    
    add_action( 'intense_before_main_content', 'custom_intense_before_main_content' );
    function custom_intense_before_main_content() {
    echo '<div class="container_12"><div class="intense row" style="margin:0;">';
    }
    
    add_action( 'intense_after_main_content', 'custom_intense_after_main_content' );
    function custom_intense_after_main_content() {
    echo '</div></div>';
    }
    
    add_action( 'wp_footer', 'search_btn_code' );
    function search_btn_code() {
        ?>
        <style>
        #searchsubmit, .screen-reader-text{
        display: none;
        }
        #s{
        width: 100%;
        box-sizing: border-box;
        height: 35px;
        }
        </style>
        <script type="text/javascript">
        jQuery(function($) {
          $('#s').attr('placeholder', 'Search');
        });
        </script>
        <?php
    }

    Hope it helps :slight_smile: Please feel free to ask more question if you have any.

    Cheers
    Ash

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.