I’ve been asked to recreate a tutorial on how to make your sidebar look better, more like mine. First of all, my entire theme (well, almost entire), is custom styling but that doesn’t mean you can’t make it look REALLY good anyways.

First, let me break down how Genesis works.

Child Theme

Genesis works on the child-theme basis. Basically, imagine having a car. WordPress is the engine, Genesis provides the internals as well as the basic shape and your “child theme” is the paint job. Plugins are like add-ons such as spoiler etc.

Enough with the metaphors (or similes).

The cool thing about Genesis is that you can easily customize it without hurting the framework with these child themes. Let’s see how we can go about that.

The Structure

A child theme is composed of different files namely:

  • style.css – controls the “styles” 
  • functions.php – adds functionality to your theme

and sometimes other files like:

  • index.php
  • page.php

The only file we’ll actually touch is style.css so let’s start with that:

Style.CSS

Open this file up via appearance->editor or via FTP. First, search for “.sidebar .widget” and replace the code with:

.sidebar .widget{
  margin-bottom: 0;
  padding-top:.75rem;
  padding-bottom: .75rem;

  overflow: hidden; }

.sidebar .widget:first-child {

  border-top: 0; 
  padding-top: 0;
  padding-bottom: 0;}

.sidebar.widget-area ul li {
  list-style-type: none;
  margin-bottom: 6px;
  margin-bottom: 0.375rem;
  word-wrap: break-word; }

This will setup the spacing between individual widgets. Let’s setup the way the title looks:

.widget h4.widgettitle {
  color: #fff;
  padding: 5px 10px;
  margin-bottom: 1px;
  box-shadow: 0 0px 1px #333;
  background: #2D6BB5;
  text-shadow: -1px -1px #444444; }

Change the background color to suit your needs but if you do change it to something lighter, make sure you adjust the color of the text as well (color). Outside of that, this will setup the size of the header for the title. Text-shadow makes that “inset” look for the text, delete that if you don’t want it. We’re also setting a box-shadow which makes the entire title look like it’s slightly hovering above the page.

A few more things. We have a TON of different widgets and widget types from tag clouds to text widgets. Let’s tackle styling for all of them:

.tagcloud, .side-wrap {
  padding: .5rem;
  background: #fff;}

.widget_tag_cloud .widget-wrap, .side-wrap, .widget_recent_entries .widget-wrap {
  border: 1px solid #ccc; }

.sidebar div.widget_tag_cloud, .sidebar div.widget_text, .sidebar .widget_recent_entries {
  padding-left: 0;
  padding-right: 0; }

Cool, so that’s done. This styling creates a border around our widgets and sets up some other stuff. Now, for for listing categories, articles and stuff like that, you’ll need some extra stuff:

.sidebar .widget_recent_entries ul li {
  padding: .5rem;
  background: #fff;
  border-bottom: 1px solid #ddd;
  margin-bottom: 0; }

.widget_recent_entries ul li a {
  text-decoration: none; }

And that’s it! Just make sure you replace the original declarations so for each snippet, search for the “selector” (the “.widget_recent” etc. part) and replace it. If you can’t find it, just drop it in your stylesheet. And good luck!

Result

sidebar

If you have any problems or not seeing these results. Just leave a comment! 🙂