ThemeShaper Forums » Thematic

[closed]

Moving search to top right corner

(6 posts)
  • Started 4 years ago by eastjane
  • Latest reply from eastjane
  • This topic is resolved

Tags:

  1. eastjane
    Member

    Hi

    I would like to move the search box to the top right corner of my site. I don't have a live site just yet so I am copying my code below. I tried the methods talked about in this post:http://forums.themeshaper.com/topic/widgets-in-the-header, but was not successful.

    I am using the Child theme development format.

    My style.css looks something like this. (after all the import statements on top)

    /*Have a clickable logo on the left most site */
    #blog-title a {
    display:block;
    text-indent:-4000px;
    width: 317px;
    height: 200px;
    }
    #wrapper {
    background:url('images/logo.jpg') no-repeat top left;
    background-position: 5% 0%;
    }
    
    #branding {
    padding:8px 0 1px;
    }
    /*Don't need secondary*/
    #secondary {display:none;}

    And my functions.php is empty.

    I am new to web development. I would appreciate any help.

    Thanks,
    Jane

    Posted 4 years ago #
  2. Hey there,

    Check my site - www.srinair.com. Is this what you want to do as well?

    If so, then you have to add code to functions.php in your child theme along with the necessary CSS styles in your style.css file.

    Let me know and I'll share with you what I have and the little I know.

    Sri

    Posted 4 years ago #
  3. eastjane
    Member

    Yes something along those lines is what I am looking for. I would appreciate your help.

    Thanks!

    Posted 4 years ago #
  4. eastjane
    Member

    Please help me, I am really stuck on this problem. None of the methods talked about in this post:http://forums.themeshaper.com/topic/widgets-in-the-header work for me.

    Thanks,
    Jane

    Posted 4 years ago #
  5. Erin
    Member

    You need to add a searchbar to your header before you can style it. Here is how I did it: Add to function.php:

    /* add search form to header
    */
    function add_searchbar(){
    include (TEMPLATEPATH . '/searchform.php');
    }
    add_action('thematic_header','add_searchbar');

    Then, style in your childtheme's stylesheet.

    Posted 4 years ago #
  6. eastjane
    Member

    Ok I got it! Thanks for your help. I did the following:

    In function.php

    // This will create your widget area
    function search_widgets_init() {
        register_sidebar(array(
           	'name' => 'Header Aside',
           	'id' => 'header-aside',
           	'before_widget' => '<li id="%1$s" class="widgetcontainer %2$s">',
           	'after_widget' => "</li>\n",
    		'before_title' => "<h3 class=\"widgettitle\">",
    		'after_title' => "</h3>\n",
        ));
    
    }
    add_action( 'init', 'search_widgets_init' );
    
    // adding the widget area to your child theme
    function my_header_widgets() {
    	if ( function_exists('dynamic_sidebar') && is_sidebar_active('header-aside') ) {
    		echo '<div id="header-aside" class="aside">'. "\n" . '<ul class="xoxo">' . "\n";
    		dynamic_sidebar('header-aside');
    		echo '' . "\n" . '</ul>'. "\n";
    		echo '' . "\n" . '</div><!-- #header-aside .aside -->'. "\n";
    	}
    }
    add_action('thematic_header', 'my_header_widgets', 8);
    
    function remove_branding() {
    		remove_action('thematic_header','thematic_brandingopen',1);
    }
    add_action('init', 'remove_branding');
    
    function my_brandingopen() { ?>
    	<div id="header_box">
        	<div id="branding">
    <?php }
    add_action('thematic_header','my_brandingopen',1);
    
    /* add search form to header
    */
    function add_searchbar(){
    include (TEMPLATEPATH . '/searchform.php');
    }
    add_action('thematic_header','add_searchbar', 8);

    In style.css:

    #header_box {
    	clear: both;
    	margin: 0 auto;
    	overflow: hidden;
    	position: relative;
    	width: 960px;
    }
    
    /* Moves blog name & description to the left */
    #branding {
    	float: left;
    	width: 620px;
    	margin: 0 0 0 10px;
    	padding:8px 0 1px;
    }
    
    /* Moves the new widgetized area to the right and levels it with #branding */
    #header-aside {
      float: right;
      width: 300px;
      padding: 88px 0 44px;
    }

    Thanks for your help!

    Posted 4 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.