Aligning Widgets

[[email protected]]

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

[John]

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 😉

[[email protected]]

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

[John]

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 😉

[John]

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 😉

[[email protected]]

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

[John]

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 😉

[[email protected]]

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

 

[John]

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 😉

[[email protected]]

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

[John]

You're welcome!

---

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

[Author]

Posts