ThemeShaper Forums » Thematic

[closed]

How to add the Search Widget to the Nav bar?

(9 posts)
  • Started 9 years ago by Method
  • Latest reply from Robo
  • This topic is resolved
  1. How can I add the search widget to the navigation bar?

    I followed this, but it puts the search widget above the menu bar.
    http://forums.themeshaper.com/topic/widgets-in-the-header

    I also followed this, but I dont like the style of the search. I prefer the widget style.
    http://www.cozmoslabs.com/2009/04/15/add-a-search-box-to-the-thematic-menu/

    Posted 9 years ago #
  2. This should get you started. Following the Cozmos Labs example change:

    <input id="s" name="s" type="text" value="<?php echo wp_specialchars(stripslashes($_GET['s']), true) ?>" size="20" tabindex="1" />

    to

    <input id="s" name="s" type="text" size="30" tabindex="1" onblur="if (this.value == '') {this.value = 'To search, type and hit enter';}" onfocus="if (this.value == 'To search, type and hit enter') {this.value = '';}" value="To search, type and hit enter"/>

    and add this style to hide the submit button

    #access-search #searchsubmit {
    display:none;
    }
    Posted 9 years ago #
  3. Thanks for the prompt reply. That worked a treat.

    One more question. How do I style the font inside the search box?

    Posted 9 years ago #
  4. Try:
    #access-search #s {font-family:helvetica}

    Posted 9 years ago #
  5. Thanks. That worked.

    Posted 9 years ago #
  6. yahyaayob
    Member

    How do I make it in the middle of the navigation bar?

    Right now, the search form is all the way to the top almost flushing with the top of the navigation bar.

    You can see here www.watchwerkz.com.sg/wp

    Posted 9 years ago #
  7. Add a search box to the Thematic Feature Site menu
    
    // Remove default Thematic actions
    function remove_thematic_actions() {
        remove_action('thematic_header','thematic_access',9);
    }
    add_action('init','remove_thematic_actions');
    // Remove default Thematic actions --> ENDS HERE
    
    // Create a custom access div with the menu and search box
    function search_access() { ?>
        	<div id="access">
        		<div class="skip-link"><a href="#content" title="<?php _e('Skip navigation to the content', 'thematic'); ?>"><?php _e('Skip to content', 'thematic'); ?></a></div>
                <?php wp_page_menu('sort_column=menu_order') ?>
    			<div id="access-search">
    				<form id="searchform" method="get" action="<?php bloginfo('home') ?>">
    					<div>
    						<input id="s" name="s" type="text" size="30" tabindex="1" onblur="if (this.value == '') {this.value = 'To search, type and hit enter';}" onfocus="if (this.value == 'To search, type and hit enter') {this.value = '';}" value="To search, type and hit enter"/>
    						<input id="searchsubmit" name="searchsubmit" type="submit" value="<?php _e('Search', 'thematic') ?>" tabindex="2" />
    					</div>
    				</form>
    			</div>
            </div><!-- #access -->
    <?php }
    add_action('thematic_header','search_access',9);
    // Create a custom access div with the menu and search box --> ENDS HERE
    
    /* =ACCESS MENU STYLES
    -------------------------------------------------------------- */
    
    #access-search #searchform {
        position:absolute;
        left:50%;
        width:326px;
        margin-left:170px;
        height:29px;
        border-top:1px solid #111;
        border-left:1px solid #111;
        border-right:1px solid #111;
        padding:2px 0 0 4px;
    }
    #access-search #searchform label {
        display:none;
    }
    #access-search #searchform input {
        font-size:13px;
        line-height:18px;
    }
    #access-search #searchform input#s {
        width:316px;
    }
    #access-search #searchform input#searchsubmit {
        display:none;
    }
    Posted 9 years ago #
  8. jnune09
    Member

    hey I want to get the search bar on the menu but I can't because I'm using the WP3 Menu any fix for this?

    Posted 9 years ago #
  9. Robo
    Member

    jnune09, I would like to do the same ...

    I guess you would shorten the width of the menu bar, then somehow code the search so that it fits in the new-found space.

    Posted 9 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.