You probably need to add a CSS rule if you want the individual widget items to appear “inline-block” (horizontally) instead of block (stacked vertically). It would look something like this:
#mycustomwidgetarea aside {
display: inline-block;
};
Thanks for replying CrouchingBruin.
I added `#Homepage Widget Area &cells=2 {
display: inline;
};
` to my themes custom css page but the result is the same as before.
See the homepage here http://www.thewattletree.com
According to your original post, this is one of the parameters for register_sidebar:
'id' => 'mycustomwidgetarea',
That should mean that your new widget area has an ID of mycustomwidgetarea, and that’s how you would refer to it in your CSS, not with the widget name Homepage Widget Area, which is how you would see it if you go to Appearances > Widgets from your dashboard.
When you go to Appearances > Widgets, do you see your widget area there, where you can drag widgets into? Have you added any widgets? And where in your page did you add the new sidebar? I don’t see it either there or in your source code. Did you add it to one of your templates?
Hi again.
Ok I have changed the code to 'id' => 'mycustomwidgetarea', in the custom css sheet.
Yes I have the widgetized area available within the dashboard and I have 2 widgets added to it.
See on the homepage of my site there is a social media wieget and a search widget placed in this widget area.
I just took a look at your site using Firefox. Wow, that’s very interesting. You have two widgets in the middle of your content area, and there’s no widget container (sidebar) that contains them. That’s why the CSS I first provided isn’t working.
OK, here’s a very crude way to do it. Copy and paste this to your custom CSS file:
/* Display rules for the Subscribe widget */
#woo_subscribe-3 {
width: 200px;
display: inline-block;
}
/* Display rules for the search widget */
#woo_search-2 {
width: 300px;
display: inline-block;
margin-left: 20px;
}
You can adjust the widths for the different elements above if they are too wide or narrow. The margin-left line is the amount of spacing between the two widgets.
ok thanks but still no joy. The 2 widgets are still not side by side.
PS heres the css code so far `#mycustomwidgetarea aside {
width: 300px;
display: inline-block;
margin-left: 20px;
};
/* Display rules for the Subscribe widget */
#woo_subscribe-3 {
width: 300px;
display: inline-block;
margin-left: 20px;
}
/* Display rules for the search widget */
#woo_search-2 {
width: 300px;
display: inline-block;
margin-left: 20px;
}`
It looks like it’s almost there, because the search widget picked up the correct CSS and its width is narrower than it used to be. For some reason, the social media widget isn’t picking up its CSS.
Can you try taking this part out?
#mycustomwidgetarea aside {
width: 300px;
display: inline-block;
margin-left: 20px;
};
Ok I have replaced all the previous css code with that last one. But no luck .
It looks like you removed those widgets? I don’t see them anymore.
Yes Just for the moment till I sort out the code.
Just in case the client is watching.
alternative approach:
you can give your widget area a container div with specific css class by changing this:
<?php
// Custom widget Area Start
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Homepage Widget Area &cells=2') ) : ?>
<?php endif;
// Custom widget Area End
?>
to:
<?php if( is_active_sidebar( 'mycustomwidgetarea' ) ) : ?>
<div class="homepage-widget-area">
<?php // Custom widget Area Start
dynamic_sidebar('mycustomwidgetarea');
// Custom widget Area End ?>
</div>
<?php endif; ?>
http://codex.wordpress.org/Function_Reference/is_active_sidebar
http://codex.wordpress.org/Function_Reference/is_active_sidebar#Examples
in your stylesheet, use this to format the widgets side-by-side;
example:
.homepage-widget-area { float: left; width: 100%; clear: both; }
.homepage-widget-area aside { width: 50%; float: left; }
Ah thanks alchymyth.
That’s got it sorted.
Cheers 🙂
How about if you’re using 2 separate widget areas side by side?
I assume the above CSS works for one widget area populated by 2 widgets.
