ThemeShaper Forums » Thematic

Access, branding & header widget positioning

(12 posts)
  • Started 5 years ago by Amy
  • Latest reply from Amy
  • This topic is resolved
  1. Amy
    Member

    Hello,

    I have used various functions found here to:
    Create a page with no sidebar,
    add a widget to the header &
    move the navigation to the top of the page.

    I am having some problems with the positioning of the branding & widget; the widget is appearing below branding. Not sure if there is a conflict here or not.

    Can someone check my functions.php please?

    <?php
    
    //CREATE A PAGE W NO SIDEBAR
    // filter thematic_sidebar() .. no display for the page 'Gallery', keep it for the rest
    function remove_sidebar() {
    	// We test if we are on the page 'Gallery'
    	if (is_page('gallery')) {
    		// Yes, we are .. now we switch off the sidebar
    		return FALSE;
    	} else {
    		// we are not .. we leave the switch on
    		return TRUE;
    	}
    }
    // Connect the filter to thematic_sidebar()
    add_filter('thematic_sidebar', 'remove_sidebar');
    
    //ADD WIDGET TO HEADER
    /// This will create your widget area
    function my_widgets_init() {
        register_sidebar(array(
           	'name' => 'Header Aside',
           	'id' => 'header-aside',
           	'before_widget' => '<li id="%1$s" class="widgetcontainer %2$s">',
           	'after_widget' => "",
    		'before_title' => "<h3 class=\"widgettitle\">",
    		'after_title' => "</h3>\n",
        ));
    
    }
    add_action( 'init', 'my_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" . '</div><!-- #header-aside .aside -->'. "\n";
        echo "\n" . '</div><!-- #header-box -->'. "\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);
    
    //MOVE ACCESS NAVI TO TOP OF PAGE
    function new_header() {
        remove_action('thematic_header','thematic_brandingopen',1);
        remove_action('thematic_header','thematic_access',9);
    }
    add_action('init', 'new_header');
    add_action('thematic_header','thematic_access',1);
    add_action('thematic_header','thematic_brandingopen',2);
    
    ?>
    Posted 5 years ago #
  2. You've added your widget action in position '8'

    add_action('thematic_header', 'my_header_widgets', 8);

    but you've got your branding starting at position 2 and ending at position 7. Try changing it to this:

    function new_header() {
    remove_action('thematic_header','thematic_brandingopen',1);
    remove_action('thematic_header','thematic_access',9);
    remove_action('thematic_header','thematic_blogtitle,3);
    }
    add_action('init', 'new_header');
    add_action('thematic_header', 'my_header_widgets', 1);
    add_action('thematic_header','thematic_access',2);
    add_action('thematic_header','thematic_brandingopen',3);
    add_action('thematic_header','thematic_blogtitle',4);

    That should put your widget above the branding, but still inside the header.

    Check out this diagram (can't remember who originally posted it, but it's super useful).

    hope that helps..

    juan

    Posted 5 years ago #
  3. Amy
    Member

    I got the code for that part from this post:
    http://forums.themeshaper.com/topic/widgets-in-the-header
    I'm really don't know php at all, so its really confusing to me;
    The branding should be on the left, the widget on the right and wrapped ? in header_box.

    Posted 5 years ago #
  4. Hi Amy,

    is it possible that you missed the CSS part in the mentioned post?

    Chris

    Posted 5 years ago #
  5. Amy
    Member

    Hey Chris,

    Nope, I got that as well...

    #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;
    }
    
    /* Moves the new widgetized area to the right and levels it with #branding */
    #header-aside {
      float: right;
      width: 300px;
      padding: 88px 0 44px;
    }
    /* This will clear the floats and keeps the access bottom line
    from jumping into the air */
    #access {
      clear: both;
    }
    Posted 5 years ago #
  6. Amy
    Member

    I tried this with a fresh new child theme, still getting the same results.
    I'm stumped.
    Any ideas?

    Posted 5 years ago #
  7. Hi Amy,

    this is the working part for moving the menu to the top and the widgetized area in the header:

    // This will create your widget area
    function my_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', 'my_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_access() {
    	remove_action('thematic_header', 'thematic_access', 9);
    }
    add_action('init', 'remove_access');
    add_action('thematic_header', 'thematic_access', 0);

    and

    #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;
    }
    
    /* Moves the new widgetized area to the right and levels it with #branding */
    #header-aside {
      float: right;
      width: 300px;
      padding: 88px 0 44px;
    }
    /* This will clear the floats and keeps the access bottom line
    from jumping into the air */
    #access {
      clear: both;
    }

    Chris

    Posted 5 years ago #
  8. Amy
    Member

    Hey Chris:

    Ok, yes, thanks! that works, except.. there is no <div id="header_box">
    in the php to enclose the branding & header-aside to keep them in place when the window is resized;
    I'm using the 3 col template & the header widget is to the right edge.
    I move it w/css to align it centered above the two r columns
    margin: 0 200px 0 0;
    and when the page is resized (1024x768) it moves down.
    look here where you gave the code before w/ the header_box:
    http://forums.themeshaper.com/topic/widgets-in-the-header
    post 27 & 28

    Thanks

    Posted 5 years ago #
  9. Hi Amy,

    forget that #header_box thing .. seems to come from one of my earlier experimental codes.

    Could you please drop an URL?

    One reason for the widget dropping below #branding could be that both are > 960px.

    In this case you need to change:

    body {
    min-width:960px;
    }

    Chris

    Posted 5 years ago #
  10. Amy
    Member

    Hi Chris,

    Right now I don't have a live site.
    The Three-Column (Right) Primary layout I'm using has body {min-width:960px;}.

    Amy

    Posted 5 years ago #
  11. Hi Amy,

    if you align #header-aside with margin you add another 200px to it. In this case you end up with a total of 1120 px. In this case you need to adjust the min-width too.

    Chris

    Posted 5 years ago #
  12. Amy
    Member

    Thanks for the help Chris, got it all sorted out!

    Posted 5 years ago #

RSS feed for this topic

Reply

You must log in to post.