In this edition of WordPress 1 Minute Wonders I will answer a question which I frequently get emailed about… and that is how to style widgets next to each other when using my Widgets on Pages WordPress plugin.
In this post I have 3 widgets in one of the sidebars created by the plugin. I have named the sidebar horiz.
To get the Widgets to display as they do above there was some extra CSS that I had to add to my theme’s style.css file to get them to display like this… here it is.
#horiz {
overflow: auto;margin: 10p;padding: 10px;
}
#horiz .widget {
float: left;
width: 25%;
padding: 2%;
background: #f1f1f1;
border:1px solid #999;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 3px 3px 7px #999;
-webkit-box-shadow: 3px 3px 7px #999;
-o-box-shadow: 3px 3px 7px #999;
box-shadow: 3px 3px 7px #999;
margin: 0 1%;
}
I have put a fair amount of styling in there to make them look a bit more appealing but essentially the important bit that makes the widgets sit next to each other can be done with just the following;
#horiz {
overflow: auto;
}
#horiz .widget {
float: left;
width: 25%;
padding: 2%;
margin: 0 1%;
}
In the first section we style the whole sidebar (you would replace .horiz with whatever you had called your sidebar), making sure that the content overflow is set to auto. This makes sure that any content following the sidebar does not also creep up alongside the widgets.
The second section styles the widgets (all three in this case). The key part here is the float:left; which makes them site alongside each other.
[jbox color=”blue” vgradient=”#fdfeff|#bae3ff” title=”Found this useful?”]If you’ve used this tip why not subscribe to my feed or check out the first item in the WordPress 1 Minute Wonder series?[/jbox]
Hi Todd,
Thanks for your email earlier and for writing this tutorial but it’s still not working. I’ve even named my WoP sidebar horiz and copied your CSS directly to see if I can force it to do what I want. No luck. It still stacks each widget one on top of the other.
I’m using Prose on the Genesis Framework and this is ONE thing I cannot get to work. It’s getting very frustrating. I’d send you a link but it’s on my localhost server, unfortunately. But I could send you a couple of screenshots or whatever else might help figure it out.
Thanks,
~Annie
Oh sorry to hear that Annie… perhaps you could mail me the outputted html as well as your full css files?
Sure. I’ll do that shortly.
Thanks!
Aloha Todd,
I need help getting the vSlider widget I’m using along with your Widgets on Page plugin to center properly on my Weaver 2010 default home page (child) theme. Please take a look at it, and let me know if you have the proper CSS that I can drop in to make it either A.) CENTER in the page’s content layout area, or B.) FILL the entire width 100% with no margin, or any another other CSS formatting tips to get adjusting the margins here.
http://www.shackhawaiikai.com
Also see:
http://www.shackwaikiki.com
Mahalo!
Hey Robert,
Just had a quick look… I’m no expert on the vSlider but the following is a dirty fix
div#vSlider {
margin-left: -23px;
padding: 0;
}
Todd
Aloha Todd,
That’s it!!!! YOU ARE THE MAN!!!
Go back and check out the site I linked, and you’ll see it’s just about PERFECT!
Mahalo Nui,
Robert
I am using Thesis and when I add the widgets in a page, the fonts are much larger than the normal body fonts. How would I add CSS styling for the title and fonts of the widgets?
Hey Andy,
The h1 and p trags can be access with the following type of selectors
.widgets_on_page p, .widgets_on_page h1 {
}
Of course the exact implementation depends on the CSS that your theme provides… if you have a link I don’t mind taking a look.
Stumbled across this thread whilst trying to figure out the horizontal thing…
I’ve just modified some header widget space to accommodate an adsense leaderboard and it’s pushed the social widgets down, which then obviously screws up how the header looks.
Sidebars are fine to have vertical widgets, but how would I go about setting horizontal widgets in the header only?
Site is http://www.eaglewavesradio.com.au
Thanks in advance for any assistance offered.
Hey Brendon,
You would need to use CSS to do this so as to specifically select the widgets which are children to your header element… or perhaps you can target the specific widgets?
If you have a link with the widgets actually in the header I’d be happy to take a look .
Ta,
Todd
Can’t seem to get the boxes beside each other.
Any ideas? gbizdesigns.com
Hey gbiz,
What you’ve done here is add 3 different sidebars (each with one widget in) rather than using one sidebar with 3 widgets in. Could you try putting all three widgets in your horiz1 sidebar and changing the css to target horiz1 rather than horiz
If you don’t want to do this you’ll have to style your sidebars (horiz1, horiz2 and horiz3)
Yes, you are right. That should have been 3 widgets in 1 sidebar. But, now that was done, still can’t get them beside each other… My CSS is here:
#horiz1 {
overflow: auto;margin: 10p;padding: 10px;
}
#horiz1 .widget {
float: left;
width: 25%;
padding: 2%;
background: #f1f1f1;
border:1px solid #999;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 3px 3px 7px #999;
-webkit-box-shadow: 3px 3px 7px #999;
-o-box-shadow: 3px 3px 7px #999;
box-shadow: 3px 3px 7px #999;
margin: 0 1%;
}
Any other hints?
Thank you
Ah right… easy one this 😉
Simply add this extra CSS line to the above
clear:none;
Remember if you like the plugin then a nice 5* rating at WordPress.org would be ace.
Ta,
Todd
Yep. That’s it.
5 out of 5 and Works!
Thanks Todd
Ok, pushing it with a few more questions:
Can you recommend:
1. A good solution, hopefully plugin, for showing a calendar then allowing people to select a desired event date, then registering for that event? When they register it should send a confirmation to them, and a notice to the website owner. Thoughts?
2. Do you know of a decent “Autoresponder” plugin solution for WordPress?
Cheers…
Sorry to let you down gbiz but I’m afraid I can’t offer you any recommendations here… all I can do is wish you luck in your search.
Oh and big thanks for the rating.
Hi Todd. Thanks for this plug-in (it’s what I desperately need). However, when I inserted the code into my style.css file, no changes took effect. This is the link to the site I’m working on:
http://newworldreport.now-you-know.org/
Actually, there will only be two widgets there, but I inserted the code as-is first, to see if it would work, and the widgets still display vertically. There is also a lot of space between the header and content.
Hey Elizabeth,
I looked on that link but couldn’t see any widgets at all… was this the correct link?
Ta,
Todd
Hi Todd–
I use Widgets on Pages to display current tweets. I’d like to do two thing:
1. Limit the size of the display to 1 or 2 tweets.
2. Change the font. Default seems to be Courier or something similar.
Help? Great tool! Thanx…
Hey Scott,
Here’s a quick reply;
1) This would be down to the Widget you’re using, not the Widgets on Pages plugin. Perhaps ask on the WordPress.org forum under the widgets thread?
2) Have you got a link to a site so I can take a look?
Ta,
Todd
I was super excited to find your WoP plugin! I have a WoP widget set up that I have called ‘home’ and it has two text widgets in it. I would like them to sit horizontally, but can’t seem to get it to work! I have added the following code to my style.css file via the editor in WP:
#home
{
overflow: auto;margin: 10p;padding: 10px;
}
#home .widget
{
float: left;
width: 25%;
padding: 2%;
background: #f1f1f1;
border:1px solid #999;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 3px 3px 7px #999;
-webkit-box-shadow: 3px 3px 7px #999;
-o-box-shadow: 3px 3px 7px #999;
box-shadow: 3px 3px 7px #999;
margin: 0 1%;
clear:none;
}
I have deactivated and reactivated the plug in, but that did not help. I am not sure if I put the code in the correct place or not?? Can you help me?! Thanks in advance for all your help 🙂
Hi Ellen,
Since widgets are output in a unordered list (WordPress does that) then you need to use the selector…
.home .widgets_on_page li {... }… rather than…
#home .widgetHope this helps, please let me know how you get on.
Todd
Todd, Thank you so much for getting back to me so fast. One small change and it works! Thank you so very much for your help! I’ll leave you a 5 star review for sure 🙂
Ellen
Great news Ellen!
And if you really like the plugin then a nice 5* review over on WordPress.org would be greatly appreciated.
Todd, this is an awesome plugin.. I have voted a “5”, but there is one thing that I am trying to fix. When viewing this in mobile view, the side-by-side doesn’t flow over and the widgets are all crunched in.. is there a better way to code this so that in any browser it flows so that the entire width of the widget is displayed?
Hey Arvin,
Firstly, thanks for the rating… it really is appreciated.
As for your layout issue when viewing in more narrow screens some media query CSS should be able to help. Do you have a link to your site so I can take a look?
Todd
Hi Todd,
I have been using WOP on my Home tab successfully for several months. I would like to add another set of horizontal widgets on a new page, but can’t seem to get it to work. I have created the new widget area called “Extras” and it has three text fields in it. I used the same code I had already for the “Home” WOP, the only change I made was changing home in CSS to extras…see code below. After saving the CSS file, the text info shows up on my new Extras page, but it is not horizontal and there are no boxes. Basically, http://youneedawebsite/extras should look just like http://youneedawebsite. If there is anything you can do to help it would be awesome! Thanks!
extras
{
overflow: auto;margin: 2p;padding: 0px;
}
.extras .widgets_on_page li
{
float: left;
width: 25%;
padding: 2%;
background: #000000;
border:2px solid #82b241;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 1px 1px 3px #999;
-webkit-box-shadow: 1px 1px 3px #999;
-o-box-shadow: 1px 1px 3px #999;
box-shadow: 1px 1px 3px #999;
margin: 0 1.25%;
clear:none;
}
I can’t figure this out — can you help please? I have the 3 widgets in one sidebar and would like them to line horizontally. I took the code you offered in the article but that didn’t work. So I made the two modifications (clear:none; and the widgets-on-page) and added those. No change: still lined up vertically.
Can you see what I am doing wrong?
http://www.homesforsalewinchesterky.com
Thank you!
Here’s the page: http://www.homesforsalewinchesterky.com/property-search-bluegrass-real-estate/
I had to put them back in the table so they are in a row now (but edging to the right, trying to fix this). If you can help, I will put the code back into my CSS inserts file. Thank you!
Ok, you are sick of hearing from me, lol. I tried the simpler code:
#horiz {
overflow: auto;
}
#horiz .widget {
float: left;
width: 25%;
padding: 2%;
margin: 0 1%;
}
and that is working. BUT the three widgets are stepped over to the right on the page… any idea why that is? Thank you!
Hey Sally,
Just had a look but it seems you’re not using the Widgets on Pages anymore. If you want to put up a second page where you’re using this I’d be happy to take a look.
Todd
Hello Todd,
First of all: I love your plugin!
I have been using the different versions of code above (with and without the clear:none and with the two different starting names), but the widgets still sit on top of each other.
http://www.beeldendekunstzeist.nl/amersfoort-test/
Could you please help me out?
My current CSS is:
#horiz {
overflow: auto;margin: 10p;padding: 10px;
}
.horiz .widgets_on_page li {
float: left;
width: 25%;
padding: 2%;
background: #f1f1f1;
border:1px solid #999;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 3px 3px 7px #999;
-webkit-box-shadow: 3px 3px 7px #999;
-o-box-shadow: 3px 3px 7px #999;
box-shadow: 3px 3px 7px #999;
margin: 0 1%;
clear:none;}
Thank you very much for your help!
Manon
I need am trying to post Housing Widgets on a specific page. http://advantagesalesandrentals.com/new-housing-developments/
I am using this code in CSS
#newdel {
overflow: auto;
}
#newdel .widget {
float: left;
width: 25%;
padding: 5%;
margin: 0 5%;
}
I have 12 widgets that I would like to put up, but it only seems to be adding 2 in a row and I was hoping to insert at least 3 (maybe 4) in each row and have them centered. Is this possible.
Hi Todd,
Thanks for the plugin. Unfortunately, I have still been unsuccessful in lining up my images. I’ve tried inserting the above code, with and without the “clear:none;” addition into the bottom of my style sheet and still find the images vertically displayed. Please help.