Your blog’s sidebar is an important area of your website – when people click a link to read your blog post, they see your sidebar. It’s one of the places where your visitors get their first impressions of what you and your website is all about. They see you beautiful face and a short little description about you, and they can see what you are able to offer them, like a freebie or a helpful list of popular posts.

Your sidebar’s content is all great and wonderful, but how can you edit the look and feel of your sidebar to grab the attention of your readers?

It’s really easy. Just take the codes that I am going to give you, add it to your css, and customize to your liking!

I’ll walk you through how to change the style of the widget titles, borders, and the sidebar’s background using some very simple CSS. I will also give you some tips for plugins you can use in your sidebar and how you can style them!

Tip: you can use the “inspect tool” to play around with your code on your blog! Right click on any item in your blog, then click inspect. You will then see your website’s html and css, and you can edit freely without any permanent changes.

I’m going to use my Premade WordPress theme, Coffee, as our “guinea pig”. In this tutorial, we’re going to take this sidebar from blah to beautiful!

Untitled-1

Edit Background and Borders

My sidebar example does not have a colored background or a border, but you can create one yourself by using the following code!

Navigate to Appearance > Editor > Stylesheet

.sidebar {

color: #999999; /*The color of the sidebar’s background*/

border-left: 1px solid gray; /*Size, style, and color of border. This puts a border on the left side of the sidebar. You can change “border-left” to “border” to add a border around the whole sidebar. Alternatively, you can use border-right, border-bottom, or border-top.*/

Edit Widget Titles

The first thing we’ll do is style our widget titles. This can make a huge difference in the way your sidebar looks!

Navigate to Appearance > Editor > Stylesheet

Search (cmd + f) to find this piece of code: .sidebar .widget-title

Replace the code with this and customize to your liking!

.sidebar .widget-title {

    color: #fff; /*Color of the text*/

    padding: 10px; /*Text padding*/

    text-align: center;

    background: #343434; /*Background color*/

    border-bottom: 3px solid #e0d0b9; /* Border size, style, and color. If you want a border around your entire title and not just at the bottom, replace “border-bottom” to “border”.*/

}

There also might be another code in your CSS that just says .widget-title and not .sidebar .widget-title. Here, we can change the font weight and size.

.widget-title { font-size: 16px; font-weight: 700; /*Bolds the font. To make the font not bold, change to a number lower than 400.*/ margin-bottom: 24px; text-transform: uppercase; /*Transforms the text to all uppercase*/ }

Edit Categories

categories

If you have a categories section in your sidebar, use these codes to make your categories look simple and beautiful.

Navigate to Appearance > Editor > Stylesheet

.sidebar .cat-item {

text-align: center;

text-transform: uppercase;

font-size: 10px;

}

.sidebar li {

list-style-type: none;

margin-bottom: 6px;

background: #f5f5f5; /* the background color for your category items*/

}

Image Widget Plugin

image widget

The image widget plugin is easy to use to create a little about area for yourself.

After installing the plugin, navigate to Appearance > Widgets.

Drag the image widget into your sidebar widget area. Pick an image, write a little caption, select an image size, then align to center.

The alignment option will only align your image to the center of the sidebar. To align your text as well, add this code to your theme’s stylesheet.

.widget_sp_image-description {
text-align: center;
margin: 0px auto;
width: 100%;
}

Simple Social Media Icons Plugin

social media

One of my favorite sidebar plugins is Simple Social Icons.

The icons are very easy to customize. So easy, that you don’t even have to venture into your code!

After installing the plugin, navigate to Appearance > Widgets.  Drag the simple social icons widgt into the sidebar widget area where you would like your icons to display.

Here is how I configure the settings for the sample sidebar:

 

simple social icons

Genesis Enews Extended Plugin

subscribe

Genesis Enews Extended is a fantastic tool for email subscriptions. You can connect Mailchimp, Aweber or constant contact and edit the CSS of the signup form.

Related: How to Connect Genesis Enews Extended to Mailchimp

Here are some codes you can use to match the widget to what you see in the sample sidebar. Place the codes into your theme’s stylesheet (Appearance > Editor > Stylesheet) or CSS styler (Appearance > Edit CSS)

Related: Customize Genesis Enews Extended

.sidebar .enews-widget { background-color: #fff; /*background of entire widget*/ color: #888282; padding: 0px; }

Edit the enews widget title:

.sidebar .enews .widget-title {

background: #343434; /*background color of button*/

padding: 10px;

color: #fff; /*text color*/

text-align: center;

border-bottom: 3px solid #e0d0b9; /*bottom border color*/

}

Edit the submit button:

.enews-widget input[type=”submit”] { background-color: #fff; /*Background color of button*/ color: #343434; /*Text color*/ margin-bottom: 0px; padding: 2px 0px; width: 100%; border-radius: 0px; /*Makes border edges square and not round*/ height: 40px; border: 2px solid #343434; /*Makes a 2px  wide solid border*/ }

.enews-widget input[type=”submit”]:hover, .enews-widget input[type=”submit”]:focus { background-color: #343434; /*background color hover state*/ color: #fff !important; /*font color hover state*/ }

How do you edit your blog’s sidebar?

 

Pin It on Pinterest

Share This