• Jerry

    (@gerard749)


    I built a website with subdomains and subdirectories using a thematic child theme. (1.0.2.1). I added a widget to the header. The header looked fine to me viewing it from my very old Dell with a small monitor, and from my son’s laptop. My old Dell died and now when I view my site from a larger screen the header is to the left and the top nav bar and content is centered. I used code I found on a forum:

    function.php

    // 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);

    style.css

    #header_box {
    	clear: both;
    	margin: 30 auto;
    	overflow: hidden;
    	position: relative;
    	width: 950px;
    }
    
    /* Moves blog name & description to the left */
    #branding {
      float: left;
      width: 320px;
      margin: 0 0 0 36px;
    }
    
    /* Moves the new widgetized area to the right and levels it with #branding */
    #header-aside {
      float: right;
      width: 347px;
      padding: 64px 0 20px;
    }
    /* This will clear the floats and keeps the access bottom line
    from jumping into the air */
    #access {
      clear: both;
    }
    
    #branding {
    padding: 64px 0 20px;
    }

    [review http://codex.wordpress.org/Forum_Welcome#Posting_Code ]

    Thank you for your help

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘align header with content’ is closed to new replies.