Customising your widgets

Final widget customised on page

Personally, I think one of the great features of a WordPress site is the ability to have widgets. Widgets, in case you don’t know, are little executable items (be it whatever language they are written in) that add functionality to your site.

This could be a list of your latest posts, a search bar, email signup and much more that are out there. For me, the Classic Responsive theme doesn’t make my widgets pop out, they look quite boring.

So, in this tutorial I’m going to be showing you how to customise them a little, give them a coloured header, border and a little more.

We’ going to be going from this

Original widget setup on page

Original widget setup on page

To this

Final widget customised on page

Final widget customised on page

You can see, there is a big difference. This is only the beginning of what changes you can do to these. So, let’s get started.

1) Add some colour and a border to the widget title

The first thing I like to do is make the title of the widget stand out. Now, It could be that this is all you want to do – it’s amazing how different it can look by just changing this.

Its also quite a simple change, with just the following few lines of CSS which you put into the Thesis -> Custom CSS section

.widget_title
{
  background-color: #eeeeee;
  padding-left: 10px;
  border: solid 1px;
}

This change sets the background colour of the title, I have a little padding to move the title away from the edge (otherwise the title sits right on the edge of the colour) and finally, I’ve put a solid border around.

Once done, your widgets will look something like the below image

Widget title changes

Widget title changes

I’ve gone for a grey colour, but you could use any colour that matches your colour scheme on your page.

2) Next, add the border around the widgets

If you’re like me, I like to have each widget distinguishable. You could do this in many ways, change the background colour for example. For me, the cleanest and simplest way is to have a border around each.

To do this, you will need to add the following CSS to the Custom CSS section

.widget
{
  border: solid 2px #eeeeee;
  padding: 5px;
}

So, from this CSS you can see we are targeting the widget class. We set a solid border which is just 2px thick. I’ve also gone for the same colour for the border, although you could, again, change this to your scheme.

Once done, your widgets will look similar to the following

Border added around each widget

Border added around each widget

3) Adding some box shadow

Now, you don’t have to do this, but I like to add a little shadow to give my widgets a little bit of a standout.

It’s completely optional for your needs, but if you wanted to do this you need to add the box-shadow CSS command to the widget changes. The CSS I added is as follows

.widget
{
  border: solid 2px #eeeeee;
  padding: 5px;
  box-shadow: 4px 8px #dddddd;
}

This is the same CSS as in the previous step – except with the addition of the box-shadow command.

4) Remove the line between the main content and the sidebar

So, the last thing I like to do is remove the borderline between the main content and the widget section. My personal preference is to have each section stick out on its own on the page without any division.

To do this, the following CSS needs to be added to the Custom CSS section

.columns > .content
{
    border: none;
}

All we are doing is removing the border from the content section, which is the separation line between the content and the sidebar. Once done your page will look similar to the following

Final widget customised on page

Final widget customised on page

You now have no border, between the content and sidebar and each widget stands out on its own.

More tips on the site

I hope these tips helped you to style your widgets a little and for more tips, please check out the other posts on the site.

Note: The changes in this post are for the Thesis Classic Responsive skin. Although some of the visual builder elements may be the same for other skins – the CSS changes may not work for other skins.

About the author: I’m a Software Engineer by trade and for a while I have been spending my time creating Websites and Blogs with Wordpress. I recently started to use the Thesis Framework and found only a few tutorials and help. So, I started this site to document what I learn and to share with others. I’m also available to help on a one to one basis for those that would like to work with me.

{ ( 0 comments… add one ) }

Leave a Comment