ThemeShaper Forums » Thematic

[closed]

Style Search Bar and Button / change title of widget

(2 posts)
  • Started 10 years ago by theBlogButler
  • Latest reply from Paulo
  • This topic is not resolved
  1. theBlogButler
    Member

    I need to style the search bar for a project as well as change the submit button and modify the title. I can't modify the search on the title so I'm wondering how I can do this and style the bar up - dimensions, background color, don't want border, I want to remove the text in the search bar, etc.

    Thanks

    Posted 10 years ago #
  2. Paulo
    Member

    I just finish this http://img4.imageshack.us/img4/426/picture1in.png (localhost sorry)

    //==================== Custom Search Box  ============================
    
    //Search box text
    function childtheme_search_text() {
    return "Type what are you looking for....";
    }
    add_filter('search_field_value', 'childtheme_search_text');
    
    function childtheme_search_box() {
    
     { ?>
    
    <!-- Search HTML code -->
        <form id="searchform" method="get" action="<?php bloginfo('home') ?>">
    
        	<input type="text" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '')  {this.value = 'Search';}" id="s" name="s" value="">
    
        	<input type="image" tabindex="2" value="search" name="searchsubmit" id="searchsubmit">
    
         </form>
    <!-- End of Code -->
    <?php }
    
    } // End of Search Bar
    
    //Remove the default button text
    
    function childtheme_search_submit() {
    return '<input id="searchsubmit" name="searchsubmit" type="submit" value="' . __('', 'thematic') . '" tabindex="2" />';
    }
    
    add_filter('thematic_search_submit', 'childtheme_search_submit');
    
    //======================= End custom search ===============================

    And the CSS:

    .widgettitle { display: none; }
    
    #searchform {
    	background-color:#FFFFFF;
    	border:1px solid #D9D9D9;
    	height: 32px;
    }
    
    #s {
    	background:none repeat scroll 0 0 transparent;
    	border:0 none;
    	color:#333333;
    	font-size:13px;
    	font-style: italic;
    	height:32px;
    	padding-left:5px;
    }
    
    #searchsubmit {
    	background:url(images/search-icon.jpg) no-repeat;
    	border:0 none;
    	width: 26px;
    	height: 24px;
    }

    Hope it helps :)

    Posted 10 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.