Reader Request – Styling Sidebar Content or Widget Areas in the Twenty Twelve Theme

A reader dropped me a comment yesterday wondering how we style the widget areas here on VoodooPress. I’m always happy to answer questions whenever I can, so we will take a look at what I do here, give a little bit of code, and even touch on other things you could do to spruce up your widget area. Let’s dive right in!

Now this may sound familiar to you! That’s because VoodooPress always runs the latest default WordPress theme (we jumped the gun this time, 2012 won’t be the default theme until WP 3.5 ships), and we always style up our widget area. And whenever I make a change to the theme, I tell you how I did it! If you are interested, we had a very similar article for the Twenty Eleven theme, the technique is the same!

The first thing you should always do before tweaking the TwentyTwelve theme, or just about any theme, is make a child theme! That way, when 2012 gets upgraded, you don’t lose all your hard work! There is another way to handle this through a plugin that I will describe at the end of my article.

Now you have your child theme setup, you are ready to go! See, I like my widgets to look distinct from my main content. The default WordPress themes of late: 2010, 2011, and soon 2012 all have a lightweight and simple appearance. I do like the themes, but I always like to make this one change. So here is my css, which would go into your style.css file in your child theme after the @import line (NOTE: if you don’t know quite what I’m talking about, read my article I linked above describing child themes):

.widget {
	background: #9e9786;
	background: rgba(158, 151, 134, 0.4);
	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);
	list-style-type: none;
}

The code is quite simple, the first line sets up a background colour that is used for older browsers like IE8 and previous. The second background line sets up colours for modern browsers. We use the RGB values to set that for the first three digits. That fourth digit (0.4) is the alpha value, which is transparency. It allows your widget container to blend with the background of your site. If you are unfamiliar with how to get these values, I use kuler. By using that site, you can pick a colour and get the hex colour value (9e9786) and the RGB values for any colour you select.

The remainder of the code gives us a double lined border, rounds the corners, and gives the widget a bit of a drop shadow for dimensionality. You can Google to learn how those values work, or ask me if you want further clarification on how it all works. You can make more or less rounded corners, change the colours, or make a bigger or smaller shadow. It’s all easily tweakable to get the look you are after.

That’s all I have for my boxes right now, but you can easily take this further. For instance:

.widget a {
      text-decoration: none;
      color: #401f1f;
}

Would remove the default underlining of links in the widgets, and change the link colours to maroon. And something like:

.widget h3 {
	font-weight: bold;
	font-style: italic;
	color: rgba(0, 0, 0, 0.6);
	text-shadow: 0 1px 1px #fff;
}

Would change the widget titles to be bold and italic, and would also emboss the text – you can see an example of that by looking at the Related Posts feature I have at the bottom of each single view post on VoodooPress.

That’s it for styling up the widget areas. You can see that once you know a bit about this, you can Google around for all sorts of CSS features, and easily add them in to your own widget areas. Just remember to never edit the 2012 theme, or any default theme directly always make a child theme!

I mentioned earlier a plugin option. I usually recommend that people not make theme specific edits through a plugin. My rule of thumb is that if I am making changes to a specific theme, I do the edits through a child theme. If I am making changes independent of a theme, that is implementing changes I want to work regardless of what theme I’m using, I do it in a plugin. Well, I use the exact same css regardless of what theme I’m using, so I cheat a little and I actually style my widgets through my functionality plugin. Here’s how that works.

First, I made a folder name voodoopress-func. Inside of that is a couple of files – plugin.php and voodoo-func.css. Any snippet of code I want to use regardless of theme goes in plugin.php (if the code would work in functions.php, it will work in plugin.php) and anything that needs theme independent styling goes in voodoo-func.css. So I set up my plugin.php like:

<?php
/*
Plugin Name: VoodooPress Functions
Plugin URI: http://voodoopress.com
Description: Non-theme specific functions for VoodooPress.
Author: Rev.Voodoo
Author URI: http://www.rvoodoo.com
Version: 1
License: GPL v2 - http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
*/

// SET OUR PLUGIN CONSTANTS
define( 'VP_URL', plugin_dir_url(__FILE__) );
define( 'VP_PATH', plugin_dir_path(__FILE__) );

// LOAD IN OUR WIDGET STYLES
function vp_func_style() {
	$vpStyleUrl = VP_URL . 'voodoo-func.css';
	$vpStyleFile = VP_PATH . 'voodoo-func.css';
	if ( file_exists($vpStyleFile) ) {
		wp_register_style('vpStyleSheets', $vpStyleUrl);
		wp_enqueue_style( 'vpStyleSheets');
	}
}
add_action('wp_print_styles', 'vp_func_style');

So what’s that do? It really just tells WP that this is a plugin, tells the plugin where my css file is located, and enqueues the stylesheet. So now my voodoo-func.css stylesheet loads up with my site. Then I can put whatever CSS I want in that voodoo-func.css file. Once it is all set up, zip the main folder and install it like any other plugin! That’s just a nifty trick I wanted to show you, chances are you won’t need to go this route. If you are adding tonnes of CSS you need to keep using regardless of theme, this is an option. If you are tweaking things specific to 2012, or any particular theme, just stick with the child theme!

Now that you have yur widgets styled up, what cool features have you added?

14 Replies to “Reader Request – Styling Sidebar Content or Widget Areas in the Twenty Twelve Theme”

  1. Hi
    Thanks for a great tip. I think this looks great and I managed to use the same technique to ‘elevate’ my header image.
    Now, however, I’d like to selectively switch this styling off. Any suggestions how to do this? Specifically, I want to include the logo of another organisation in the bottom widget area as a link, to show we are officially registered with them. I would like this image (a png file) to have no styling around it. I’ve used the text widget to include the image rather than a dedicated image widget, though I could change this if appropriate.
    Thanks!

    1. You would simply negate the css for that particular widget. To do that, you view your source code in the browser – or even easier is to use a developer tool such as those built in to chrome or newer IE, or using firebug for firefox. Each widget gets a specific ID (or class) named so it can be targeted. So looking at my source, I can see the following for my subscribe via email widget:

      <aside id="blog_subscription-3" class="widget jetpack_subscription_widget">
      widget code
      </aside>
      

      So I could target that widget box specifically, then add new css below what we already have for styling the widget. It’s important to put it under the existing css, CSS stands for Cascading Stylesheet, so the rules cascade down. The further down the sheet we go, the more specific the css would get. The stuff further down the sheet overrides stuff up above. So to negate styling on my example widget I would do:

      #blog_subscription-3 {
                background: none; // or maybe transparent here?
                border: none;
      }
      

      And that should negate the styling. (Hopefully this works, I’m not at a computer where I can actually test right now)

  2. How would you go about creating different background colors for each widget then? I would like to do this on mine to mimic the Windows 8 Metro interface

  3. I have increased the width of my twenty twelve theme (using child theme) but I really want to move my sidebar widgets over as I have a large white gap between them & my page content. My sidebar includes a calender which only partially shows up on some mobile devices because it is so far over to the right. How can I achieve this?
    Thanks for all you tips.

  4. A reader has asked how to go about styling individual widgets with different colours, so I figured I’d post that technique up here! It’s quite simple, we just need to be more specific with our css. I usually use the ‘view source’ feature in my browser to read the code, you can also use firebug for firefox or developer tools in IE or Chrome. Just inspect the element, specifically your desired widget. Each widget gets an ID and a class, they look like:

    <aside id="blog_subscription-3" class="widget jetpack_subscription_widget">
    widget code
    </aside>
    

    so in our style.css we have the general widget code, which defines all widgets. We could then affect one aspect of particular widgets using that class or ID. Using my above example we could use the class – .jetpack_subscription_widget which would affect every iterance of that widget (hand if you have multiple text widgets for example, and want to style them all differently), or we can use the ID, #blog_subscription-3 — you see the class is unique to the widget type, so it only affects that type of widget. The ID is specific to the particular widget. So we put our more specific css, only with the rule needing changed (for instance bg color) under our generic css! More specific css always goes lower than generic css.

  5. want to say you have a fantasic help & tip site for WordPress I have had a blog for a while but I do not do very much design I know basic CSS stuff .. I really like the twenty-two theme (default ) but wanted to give the sidebar color .. and a block3d effect thank you very much for the sidebar directions you gave to change the sidebar
    But I am having trouble I made a child theme & I have it on my blog it looks great but I can not get get it to change colors I changed the Hex and RGB but it will not change and plus I want to the post/ area ( the content area to have the same 3d block separate effect but in white and I love how you have the related post widget the same to match the side bar .. how would I change this ? please .. thank you for your time and help I also wrote you a email before I saw you saying to make a comment sorry for the double request

  6. A token to say Thank you very MUCH!
    with little tweak now my side bar is absolutely changed and looks GREAT!
    Thank you!

  7. Hi James,

    First off, I love visiting your website and appreciate all of your tutorials.

    Had a quick question, I’ve been struggling with making my site-header/ logo responsive with media queries on my WP twentytwelve blog (very new to this, and can’t figure it out for the life of me). Could you please kindly give me some direction on media queries? my site is blog.gloryandhonor.com thanks so much!

  8. Thanks for the tutorial
    can I ask you question, I start new project using twenty twelve theme, I bit struggle to put border on the left in the sidebar, not in the widget, something like border separate the body with the sidebar. And also bit confusing put border below the title of widget
    Thanks
    Wayan

  9. Pingback: traiteur rabat

Leave a Reply