Create 3-widget areas in header

Community Forums Forums General Discussion Create 3-widget areas in header

This topic is: not resolved

This topic contains 5 replies, has 2 voices, and was last updated by  RitaRobinette 1 year, 9 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #24575

    RitaRobinette
    Participant
    Post count: 3

    I have confined the title and description (logo) in  the header of the Education Theme to about 1/3 the width of the header.  I need to split the header-right widget area into 2 widget areas  (header-middle and header-right).  How is the proper way to handle this.

    #24662

    braddalton
    Participant
    Post count: 10681

    You’ll need to custom code it in your child themes functions.php file and style.css file.

    No easy way to do this really. This tutorial looks like it has a solution but not specifically for Genesis http://mysitemyway.com/docs/index.php/Adding_stuff_to_the_header

    You could also try repositioning/copying the 3 footer widgets using the genesis_header hook. Haven’t tested this but it might work. You’d also need to modify the CSS.


    #25660

    RitaRobinette
    Participant
    Post count: 3

    After man tries, I am still unable to replace header-right widget with a header-center and header-right.  Someone must have done this but I can’t find anything on how to do it.  Any help, great appreciated.

    #25839

    RitaRobinette
    Participant
    Post count: 3

    This is finally solved, thanks to some direction from Copyblogger Media Support.

    To add two new widgeted areas to header right (while leaving the title/description intact):

    Add the following to the functions.php child theme file

    /** Register 2 new widget areas */
    genesis_register_sidebar( array(
    ‘id’ => ‘header-center’,
    ‘name’ => __( ‘Header Center’, ‘education’ ),
    ‘description’ => __( ‘This is the header middle section.’, ‘education’ ),
    ) );
    genesis_register_sidebar( array(
    ‘id’ => ‘header-promo’,
    ‘name’ => __( ‘Header Promo’, ‘education’ ),
    ‘description’ => __( ‘This is the header right section.’, ‘education’ ),
    ) );

    /** Add 2 new widget areas to header right*/
    add_action( ‘genesis_header_right’, ‘add_header_center’ );
    /** Loads a new sidebar in header content */
    function add_header_center () {

    echo ‘<div class=”header-center”>';
    dynamic_sidebar( ‘header-center’ );
    echo ‘</div>';

    }

    add_action( ‘genesis_header_right’, ‘add_header_promo’ );
    /** Loads a new sidebar in header */
    function add_header_promo () {

    echo ‘<div class=”header-promo”>';
    dynamic_sidebar( ‘header-promo’ );
    echo ‘</div>';

    }

     

    Added the following to style.css:

    #header .widget-area {
    width: 840px;
    float: right;
    padding-top: 15px;
    }

    #header .header-center {
    width: 300px;
    float: left;
    background-color: #ddf2fd;
    position: relative;
    }
    #header .header-center .featuredpost .post {
    border: none;
    overflow: hidden;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    display: block;
    padding: 0px;
    float: none;
    }
    #header .header-center h2 a,
    #header header-center h2 a:visited {
    line-height: 15px;
    width: inherit;
    text-align: left;
    font-size: 15px;
    font-weight: normal;
    color: #D5294F;
    background-color: #ddf2fd;
    padding-bottom: 0px;
    padding-left: 10px;
    padding-top: 5px;
    }

    #header .header-center .post {
    float: left;
    overflow: hidden;
    }
    #header .header-center .textwidget {
    text-align: left;
    }
    #header .header-promo {
    width: 300px;
    float: right;
    margin-top: 115;
    margin-bottom: 0;
    position: relative;
    }

    #header .header-promo h2 a,
    #header .header-promo h2 a:visited{
    font-size: 15px;
    font-weight: normal;
    color: #D5294F;
    line-height: 11px;
    padding-bottom: 0px;
    padding-left: 10px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;

    }
    #header .header-promo .post {
    overflow: hidden;
    margin-top: 5px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 5px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    float: left;

    }
    #header .header-promo .textwidget {
    text-align: left;
    }
    #header .header-promo img {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    }

     

    #25843

    braddalton
    Participant
    Post count: 10681

    Thanks for that code Rita.

    After testing the code works, but anyone else that uses it should understand that the title area in the header needs to be modified as well.

    Also the code needs to be fixed which you can do using a text editor like Notepad++.


    #25858

    RitaRobinette
    Participant
    Post count: 3

    Yes.  My solution keeps the title area built into the child theme intact.

     

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.