Aligning Widgets

Community Forums Forums Design Tips and Tricks Aligning Widgets

This topic is: resolved

This topic contains 10 replies, has 2 voices, and was last updated by  John 1 year, 8 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #4534

    keylimedigitaldesigns@gmail.com
    Participant
    Post count: 28

    I added a new widget area to the adorable theme and I want them to all align horizontally but I can’t figure the why they won’t.

    http://www.client.keylimedigitaldesigns.com/

    The widgets are home-top-left, home-top-middle, and home-top-right

    Any css suggestions to make the middle and right widget float up next to the left one? Thanks!

    Kendra

    #4538

    John
    Participant
    Post count: 157

    Kendra,

    You’ve got two DIVs with the same ID of “featured-top”, one inside the other – you should only have one ID per page. If you change that inner DIV to a different ID, or better yet make it a class, I think you’ll find your answer.

    John


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

    #4674

    keylimedigitaldesigns@gmail.com
    Participant
    Post count: 28

    Thanks! Got the widgets all lined up thanks to your advice! Do you have suggestions as to why the sidebar is still floating down at the bottom? I tried adjusting the content width but it wasn’t helping.

     

    THANKS1

    #4710

    John
    Participant
    Post count: 157

    You’re welcome!

    RE the sidebar:

    .content-sidebar #content, .sidebar-content #content {width: 100%;}


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

    #4713

    John
    Participant
    Post count: 157

    Hold off on that 100% width…

    I just checked the Adorable demo theme and she has the #sidebar DIV below the #content DIV. Your site has the #sidebar DIV inside the #content DIV.

    Perhaps that got moved when you added the widget area? You may want to change that back to the original structure rather than changing the CSS which I mentioned in my previous post.

    John


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

    #4888

    keylimedigitaldesigns@gmail.com
    Participant
    Post count: 28

    Thanks for your help John. I do see what your talking about in firebug but I can’t figure out where to make that change in my theme. Is it in the functions.php or home.php?

    Thanks!

    Kendra

    #4972

    John
    Participant
    Post count: 157

    I would take a look at the code you used to add the new widget area, and that may be in both functions.php and home.php. You can paste the code here and I’ll look it over for you. (Alternatively you can email those two files to me at john @ blackhillswebworks dot com, which might be easier than pasting the code here in the forum.)


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

    #5077

    keylimedigitaldesigns@gmail.com
    Participant
    Post count: 28

    Thanks so much!!!

    Here is my functions.php

    <?php
    /** Start the engine */
    require_once( get_template_directory() . ‘/lib/init.php’ );

    /** Child theme (do not remove) */
    define( ‘CHILD_THEME_NAME’, ‘Adorable Child Theme’ );
    define( ‘CHILD_THEME_URL’, ‘http://www.studiopress.com/themes/adorable’ );

    /** Add Viewport meta tag for mobile browsers */
    add_action( ‘genesis_meta’, ‘adorable_add_viewport_meta_tag’ );
    function adorable_add_viewport_meta_tag() {
    echo ‘<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>’;
    }

    /** Add support for custom background */
    add_custom_background();

    /** Add support for custom header */
    add_theme_support( ‘genesis-custom-header’, array( ‘width’ => 1100, ‘height’ => 160 ) );

    /** Add support for color options */
    add_theme_support( ‘genesis-style-selector’, array( ‘theme-pinkgreen’ => ‘Pink & Green’,’theme-aquared’ => ‘Red & Aqua’, ‘theme-tealorange’ => ‘Teal & Orange’, ‘theme-pinkgray’ => ‘Pink & Charcoal’,’theme-customexample’ => ‘Custom Example’ ) );
    /** Add support for structural wraps */
    add_theme_support( ‘genesis-structural-wraps’, array( ‘header’, ‘nav’, ‘subnav’, ‘inner’,
    ‘footer-widgets’, ‘footer’ ) );
    /** Add support for 3-column footer widgets */
    add_theme_support( ‘genesis-footer-widgets’, 3 );
    // Add new image sizes
    add_image_size( ‘Home Featured’, 125, 125, TRUE );
    add_image_size( ‘Blog Excerpt’, 250, 175, TRUE );
    add_image_size( ‘Home Thumb’, 200, 100, TRUE );
    add_image_size( ‘Home Top’, 660, 200, TRUE );
    add_image_size( ‘Sidebar’, 290, 175, TRUE );

    // Changing excerpt more
    add_filter( ‘excerpt_more’, ‘new_excerpt_more’ );
    function new_excerpt_more($more) {
    return ‘<a href=”‘.get_permalink().’” rel=”nofollow”> {Read More} </a>’;
    }

    // Changing excerpt more
    function custom_excerpt_length($length) {
    return 80;
    }
    add_filter( ‘excerpt_length’, ‘custom_excerpt_length’ );

    /** Register widget areas */
    genesis_register_sidebar(array(
    ‘name’=>’Featured Top Full Width’,
    ‘id’ => ‘featured-full’,
    ‘description’ => ‘This is the full width top featured section of the homepage.’,
    ‘before_title’=>’<h4 class=”widgettitle”>’,’after_title’=>’</h4>’
    ));
    genesis_register_sidebar(array(
    ‘name’=>’Featured Top Left’,
    ‘id’ => ‘featured-top-left’,
    ‘description’ => ‘This is the featured top left column of the homepage.’,
    ‘before_title’=>’<h4 class=”widgettitle”>’,’after_title’=>’</h4>’
    ));
    genesis_register_sidebar(array(
    ‘name’=>’Featured Top Middle’,
    ‘id’ => ‘featured-top-middle’,
    ‘description’ => ‘This is the featured top middle column of the homepage.’,
    ‘before_title’=>’<h4 class=”widgettitle”>’,’after_title’=>’</h4>’
    ));

    genesis_register_sidebar(array(
    ‘name’=>’Featured Top Right’,
    ‘id’ => ‘featured-top-right’,
    ‘description’ => ‘This is the featured top right column of the homepage.’,
    ‘before_title’=>’<h4 class=”widgettitle”>’,’after_title’=>’</h4>’
    ));
    genesis_register_sidebar(array(
    ‘name’=>’Featured Bottom Left’,
    ‘id’ => ‘featured-bottom-left’,
    ‘description’ => ‘This is the featured bottom left column of the homepage.’,
    ‘before_title’=>’<h4 class=”widgettitle”>’,’after_title’=>’</h4>’
    ));
    genesis_register_sidebar(array(
    ‘name’=>’Featured Bottom Right’,
    ‘id’ => ‘featured-bottom-right’,
    ‘description’ => ‘This is the featured bottom left column of the homepage.’,
    ‘before_title’=>’<h4 class=”widgettitle”>’,’after_title’=>’</h4>’
    ));

     

    Here is my home.php

    <?php

    add_action( ‘genesis_meta’, ‘adorable_home_genesis_meta’ );
    /**
    * Add widget support for homepage. If no widgets active, display the default loop.
    *
    */
    function adorable_home_genesis_meta() {

    if ( is_active_sidebar( ‘featured-full’ ) || is_active_sidebar( ‘featured-top-left’ ) || is_active_sidebar( ‘featured-top-right’ ) || is_active_sidebar( ‘featured-bottom-left’ ) || is_active_sidebar( ‘featured-bottom-right’ )) {

    remove_action( ‘genesis_loop’, ‘genesis_do_loop’ );
    add_action( ‘genesis_loop’, ‘adorable_home_loop_helper’ );

    }
    }

    /**
    * Display widget content for home widgets.
    *
    */
    function adorable_home_loop_helper() {

    if ( is_active_sidebar( ‘featured-full’ ) || is_active_sidebar( ‘featured-top-left’ ) || is_active_sidebar( ‘featured-top-middle’ ) || is_active_sidebar( ‘featured-top-right’ ) || is_active_sidebar( ‘featured-bottom-left’ ) || is_active_sidebar( ‘featured-bottom-right’ )) {

    echo ‘<div id=”featured-full”>’;
    echo ‘<div class=”featured-full”>’;
    dynamic_sidebar( ‘featured-full’ );
    echo ‘</div><!– end .featured-full –>’;
    echo ‘</div><!– end #featured-full –>’;

    echo ‘<div id=”featured-top”>’;
    echo ‘<div class=”featured-top-left”>’;
    dynamic_sidebar( ‘featured-top-left’ );
    echo ‘</div><!– end .featured-top-left –>’;

    echo ‘<div id=”featured-top-middle”>’;
    echo ‘<div class=”featured-top-middle”>’;
    dynamic_sidebar( ‘featured-top-middle’ );
    echo ‘</div><!– end .featured-top-middle –>’;

    echo ‘<div class=”featured-top-right”>’;
    dynamic_sidebar( ‘featured-top-right’ );
    echo ‘</div><!– end .featured-top-right –>’;
    echo ‘</div><!– end #featured-top –>’;

    echo ‘<div id=”featured-bottom-stuff”>’;
    echo ‘<div class=”featured-bottom-left”>’;
    dynamic_sidebar( ‘featured-bottom-left’ );
    echo ‘</div><!– end .featured-bottom-left –>’;

    echo ‘<div class=”featured-bottom-right”>’;
    dynamic_sidebar( ‘featured-bottom-right’ );
    echo ‘</div><!– end .featured-bottom-right –>’;
    echo ‘</div><!– end #featured-bottom-stuff –>’;

    }

    }

    genesis();

     

    #5132

    John
    Participant
    Post count: 157

    Your functions.php looks okay, but your home.php has an extra div from when you added the widget area. If you delete that line from the function adorable_home_loop_helper I think your sidebar will move up to where it’s supposed to be. Here’s the line you need to remove, assuming the code editor doesn’t remove it from here:

    echo '< div id=”featured-top-middle” >';


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

    #5183

    keylimedigitaldesigns@gmail.com
    Participant
    Post count: 28

    Thank you thank you!!!! Okay all resolved! Appreciate the help!

    #5194

    John
    Participant
    Post count: 157

    You’re welcome!


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

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

The topic ‘Aligning Widgets’ is closed to new replies.