Wrapping the Widgets in a Nice CSS3 Box

I like the way our Twenty Ten child theme looks after making it a bit wider. Everything has opened up, the widgets especially don’t look so cramped. However, I still don’t feel like they stand out enough. I find that things just kind of look like they are floating over there, competing with the content and looking a bit out of place. I think a great way to take care of that would be to just wrap them up in their own nice little box. Let’s take a look at some simple css.

Now when we investigate the code in Twenty Ten, we see that we have some options for styling widgets. We could target the sidebars and the footer area separately. We could even target each widget separately if we really wanted to. But I think for this edit, it would be best to target all the widget containers. Keeping everything uniform will really look nice.

So by looking at the source code for my site (you could use firebug for this) I can see that all of our widgets get wrapped in a class called widget container. So targeting this in the css will affect all of our widgets. So at the bottom of my child theme’s style.css I’ve added:

.widget-container {
	background: #9e9786;
	background: rgba(158, 151, 134, 0.6);
	border: 4px double #ffffff;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-o-border-radius: 7px;
	border-radius: 7px;
	padding: 5px;
	-webkit-box-shadow: 5px 5px 12px rgba(64, 31, 31, 0.5);
	-moz-box-shadow: 5px 5px 12px rgba(64, 31, 31, 0.5);
	box-shadow: 5px 5px 12px rgba(64, 31, 31, 0.5);

And that is really it, just one block of code. Yours could be far simpler than this if you like. But essentially here we add a background colour on line 2. That is just the fallback colour for browsers not yet supporting CSS3. Then we add in our background colour for the rest of the browsers, with a little alpha transparency. We add in a double border of white, with some nice rounded corners, and finally give a bit of padding to keep the borders off the content a bit. And optionally, the last three lines give us a nice shadow which is real fun.

That’s really it, our basic child theme is nearly complete. We will focus on targeting post-formats next to set them off a bit differently, and that will end the setup of our basic child theme. After this we will move on to some more advanced items to see what we can do with this child theme.

Leave a Reply