ThemeShaper Forums » Thematic

[closed]

floating the search box in the header

(6 posts)
  • Started 4 years ago by js09
  • Latest reply from boerenooi
  • This topic is not resolved
  1. js09
    Member

    I need to get the search box code and stick it in so that it is displayed at the top-right of my header.

    Here is the incorrect code I have so far, I put it in header-extensions.php right after <div id="branding"> (around line 358)

    <?php
    
    // Remove default Thematic actions
    function remove_thematic_actions() {
        remove_action('thematic_header','thematic_access',9);
    }
    add_action('init','remove_thematic_actions');
    
    // Create a custom access div with the menu and search box
    function search_access() { ?>
    
    			<div id="access-search">
    				<form id="searchform" method="get" action="<?php bloginfo('home') ?>">
    					<div>
    						<input id="s" name="s" type="text" value="<?php echo wp_specialchars(stripslashes($_GET['s']), true) ?>" size="20" tabindex="1" />
    						<input id="searchsubmit" name="searchsubmit" type="submit" value="<?php _e('Search', 'thematic') ?>" tabindex="2" />
    					</div>
    				</form>
    			</div>
    
    <?php }
    add_action('thematic_header','search_access',9);
    
    ?>

    thanks for the help

    Posted 4 years ago #
  2. js09
    Member

    made some progress, I simplified the code to only this:

    <?php
    
    // Remove default Thematic actions
    function remove_thematic_actions() {
        remove_action('thematic_header','thematic_access',9);
    }
    add_action('init','remove_thematic_actions');
    
    ?>
    
    			<div id="access-search">
    				<form id="searchform" method="get" action="<?php bloginfo('home') ?>">
    					<div>
    						<input id="s" name="s" type="text" value="<?php echo wp_specialchars(stripslashes($_GET['s']), true) ?>" size="20" tabindex="1" />
    						<input id="searchsubmit" name="searchsubmit" type="submit" value="<?php _e('Search', 'thematic') ?>" tabindex="2" />
    					</div>
    				</form>
    			</div>

    The styling I'm using so far is:

    #access-search{
    	position:relative;
            float: right;
    	width:360px;
    	height:29px;
    	padding:2px 0 0 4px;
    }

    Am I going about this the correct way? What is the purpose of the first part of code? (remove_action('thematic_header','thematic_access',9)

    Posted 4 years ago #
  3. Hi js09,

    For the past couple of weeks I've been studying child themes and about a week ago I decided to go with Thematic for my new personal theme project. I've been experimenting with the style sheet and the functions file to see if I can get the results that I need. Basically I wanted to do the same as you and place my search box in the header. This is what I did without touching any of the core files:

    In the functions file I typed the following:

    // Adds a search box to your theme header
    function childtheme_mysearch() { ?>

    <div id="mysearch">
    <?php wp_loginout(); ?>
    <?php get_search_form(); ?>
    </div>

    <?php }

    add_action('thematic_header', 'childtheme_mysearch',2);

    I also added a login/logout link next to my search. Since thematic_header() loads the following: http://themeshaper.com/thematic/guide/?page_id=10

    On that page link from the thematic guide you can see certain "Actions" have "Positions". All I did was create a function and ranked my function as "2" in the header. Then I used css to place it where I wanted it.

    My CSS:

    /* Header Search Box Specifics */

    #mysearch {
    width: 269px;
    height: 36px;
    margin: 0 0 -37px 550px;
    padding-left: 10px;
    background-image: url(images/search.gif);
    background-repeat: no-repeat;
    z-index: 102;
    }
    #mysearch a {
    text-decoration: none;
    color: #fff;
    margin: 0;
    padding: 0;
    }
    #searchsubmit {
    display: none;
    }
    #searchform input#s{
    width: 80%;
    margin:0;
    padding:2px;
    border:1px solid #ccc;
    }
    #searchform {
    margin-top: -20px;
    padding-left: 80px;
    }

    I added a background to my search div to make it look nice and complement my header background. Hopefully once I'm finished making my final edits I'll have my theme up and loaded on my site within a week.

    P.S. the width of my branding div is 915px with left padding of 25px.

    On a final note, I don't know if this is the proper way to edit the header since it's hard to find in-depth documentation and examples. I could be wrong I may not be looking in the right places, but based what little info I've found and what I've been able to deduce, this seems to be working with only the "style sheet" and "functions" file.

    Posted 4 years ago #
  4. boerenooi
    Member

    hi jgandjz

    This helped alot, does this meathod also work to put the searchbar parallel with the menu?

    Posted 4 years ago #
  5. boerenooi
    Member

    Hmmm I've tried added the searchbar, using this method, to my access section. But it seems to go UNDER (like a bottom layer) it. Is there a css trick that I can use to make it go above that section? Ive found that all the answers lead to z-index, but still I have not luck.

    Any help?

    Posted 4 years ago #
  6. boerenooi
    Member

    I found the answer here...

    http://www.cozmoslabs.com/2009/04/15/add-a-search-box-to-the-thematic-menu/

    :D

    Posted 4 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.