ThemeShaper Forums » Thematic

[closed]

Styling Search Box

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

    Can anyone point me in the right direction with styling the search box? I have a few specific things I'm trying to do:

    1 - change the title of the widget from "Search" to "Find It". There is not an option in the widget to modify the title

    2 - Remove the text from the search box

    3 - Remove the drop shadow border from the text box. I want it all one solid color as in the image shown:

    http://i878.photobucket.com/albums/ab348/cmw1974/searchbar.jpg

    4 - Modify the button so it is a single color w/ white text like in the image

    Here is the code I have so far but it has not helped much other than to change the background color of the box:

    /* =Search bar
    -------------------------------------------------------------- */
    input#s{
     background:#d4edf2;
     }
     input#s:focus{
     background:#c1c1c1;
     }
     input#searchsubmit{
     background:#c3c3c3;
     color:#fff;
     }
     input#searchsubmit:hover{
     background:#666666;
     cursor:pointer;
     }

    Thanks in advance for the replies!

    Posted 10 years ago #
  2. theBlogButler
    Member

    bump. any help here? Thanks!

    Posted 10 years ago #
  3. 1. I just looked at a base thematic theme...if you change the title: field in the search widget, it changes the title from search to whatever...Search is just the default. If your not seeing a Title field in the widget, perhaps its a plugin thing...or are you using a specific child-theme that messes with widget code?

    2. You need to create a filter in functions.php, i think this is what yur looking for:

    // Customize the search form
    function childtheme_search_form($form) {
        $form = '<form method="get" id="searchform" action="' . get_option('home') . '/" >
                <label class="hidden" for="s">' . __('Search:') . '</label>
                <div>';
        if (is_search()) {
            $form .='<input type="text" value="' . attribute_escape(apply_filters('the_search_query', get_search_query())) . '" name="s" id="s" />';
        } else {
            $form .='<input type="text" value="To search, type and hit enter" name="s" id="s"  onfocus="if(this.value==this.defaultValue)this.value=\'\';" onblur="if(this.value==\'\')this.value=this.defaultValue;"/>';
        }
        $form .= '<input type="submit" id="searchsubmit" value="'.attribute_escape(__('Search')).'" />
                </div>
                </form>';
        return $form;
    }
    add_filter('get_search_form', 'childtheme_search_form');

    3. I'm pretty sure to remove the border/drop shadow effect you just need to mess around with the ".aside input" css class, like do a border:none to make it go away. Then just add a background-color: #whatever-rgb-value-you-like and mess with the top and bottom padding. As for the button, wouldnt that then be .aside input select? or is it input:select?

    Posted 10 years ago #
  4. theBlogButler
    Member

    Thanks for the reply. I've dug a bit more and figured out that I'm not even seeing the Thematic specific plugins. I don't know why, everything else works fine and the theme is nearly complete. Really strange.

    I have only one search widget and it says "there are no options for this widget" - this is what makes me think I'm not seeing the thematic search widget for some reason.

    Posted 10 years ago #
  5. theBlogButler
    Member

    I installed the latest DEV version of Thesis and now my widgets are working properly

    Posted 10 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.