In this lesson we’ll focus entirely on CSS to style our theme. In Lesson 3 we wrote some very basic layout styling to make it easier to separate the elements from each other, but now it’s time to do it properly. We will also style specific things in the templates we created in the previous lesson.

What we will do is to style the content in our sidebar, both widgets and the hard-coded parts, add more styling to the header and footer as well as our templates such as comments and single post templates.

From now on, after this lesson, when we add new content and templates that’ll need styling, I’ll show the CSS code along with the code. I thought it’d be easier to just start with the basic HTML structure and go through WordPress theme functions and methods without having to focus on writing CSS for everything at the same time.

Screenshot of our theme up to now

This is how our theme looks by now. In this lesson I’ve split the CSS code into logical parts, instead of just showing you the full stylesheet in one go. We will write all of our styling in the style.css, which should contain the WordPress theme definitions on the top, the include to our reset.css and the basic styling we wrote in lesson 3. Click here to jump to the basic CSS from lesson 3 to see what the style.css should contain.

I’ve put the additional images needed in this lesson in this zip. Unzip and put these images in the images folder inside your theme folder. You should already have some images from lesson 3 – click here to download the image zip if you seem to be missing those images.

General styling

Let’s begin with some overall styling before we single out specific cases. We set link colors, style lists with a space invader dot image, and add styling for default WordPress elements such as the wrappings WordPress makes around images when the user inserts images into a post.

/* Overall styling */
a, a:visited { color: #5c8ece; }
a:hover { color: #315c91; }

#navigation { font-size: 12px; }
#navigation .nav-older { float: right; }

ul.spaceinvader-list { list-style-type: none; line-height: 17px; }
ul.spaceinvader-list li {
	background: url("images/dot-space-invader.png") no-repeat center left;
	padding-left: 17px;
	padding-bottom: 5px;
}

/* Default WordPress styling */
.alignleft {
	float: left;
	margin: 0 10px 0 0;
}
.alignright {
	float: right;
	margin: 0 0 0 5px;
}
.aligncenter, div.aligncenter {
   	display: block;
   	margin: 0 auto;
}
.entry .alignleft { margin: 0 15px 5px 0; }
.entry .alignright { margin: 0 0 5px 15px; }

.wp-caption {
   	margin-bottom: 5px;
   	border: 1px solid #dcdcdc;
   	text-align: center;
   	background-color: #fdfdfd;
   	padding: 8px 4px;
}
.wp-caption img {
   	float: none;
   	padding: 0;
   	border: none;
}
.post .postcontent .wp-caption p.wp-caption-text {
   	font-size: 10px;
   	font-style: italic;
   	padding: 5px 0 0 0; 
	margin: 0;
}

The class wp-caption is WordPress’s default wrapping around images inserted in posts, which can have a caption text below. We also need to style the floats to alignleft, aligncenter and alignright accordingly.

Styling posts

Remember that we used the function post_class() which makes WordPress automatically give a variety of class names to our posts? WordPress will always give all posts the class post, so when we style the post class it will reflect on all of our templates, the front page, archives and single post view. A good CSS-tip is to always try to give the same elements across templates same class names, and instead add a different class in case you want to style something specific a little differently to prevent the stylesheet becoming long and confusing. For instance we gave posts in the single post template the class single-post in addition to the post class.

/*** POSTS ***/
.post { margin-bottom: 25px; /* Space between each post */ }
.post .postcontent p { 
	margin: 7px 0 12px 0; 
	line-height: 18px; 
}
.post h3.posttitle {
	font-family: Arial, Verdana, sans-serif;
	font-size: 20px; 
}
.post h3.posttitle a { color: #383a3d; }
.post h3.posttitle a:hover { color: #6f9bd3; }

.content-band {
	background: url("images/content-band.png") no-repeat top left;
	margin: 0 0 0 -35px;
	padding: 11px 10px 12px 35px;
	font-size: 11px;
	clear: both; /* Clear floats if there are any floated images in post */
}
.content-band a { color: #c4deff; }
.content-band a:hover { color: #e8f2ff; }
.content-band .postmeta-category { 
	background: url("images/icon-folder.png") no-repeat top left;
	padding-left: 20px;
}
.content-band .postmeta-comments { 
	margin-left: 10px;
	background: url("images/icon-comment.png") no-repeat top left;
	padding-left: 20px;
}
.content-band .postmeta-readmore {
	float: right;
	padding-right: 5px;
}
.content-band .postmeta-time {
	margin-left: 10px;
	background: url("images/icon-clock.png") no-repeat top left;
	padding-left: 20px;
	color: #C4DEFF; 
}

Styling the sidebar

Moving on to the sidebar. We add styling for our hard-coded elements on top, the search and share-element and the menu, and styling for our widgets in the widget area.

/*** SIDEBAR ***/
#sidebar {
	padding: 0 25px 0 0;
}
#sidebar ul {
	list-style-type: none;
	line-height: 16px;
	padding-top: 3px;
}
#sidebar li {
	background: url("images/dot-space-invader.png") no-repeat center left;
	padding-left: 17px;
	padding-bottom: 5px;
}
#sidebar .sidebar-box {
	padding: 0 0 0 16px;
	margin-bottom: 20px; /* Space between each element */
}
#sidebar .sidebar-box:last-child { margin: 0; }
#sidebar .sidebar-box h2.widgettitle {
	background: url("images/sidebar-band.png") no-repeat top right;
	padding: 10px 0 12px 13px;
	margin: 0 -26px 0 -15px;
	font-family: Arial, sans-serif;
	font-size: 14px;
	color: #dee9f5;
}

/* Search and share */
#sidebar #search-wrapper {
	display: inline-block;
	background: url("images/search-field.png") no-repeat top left;
	height: 29px;
	width: 221px;
}
#sidebar #search-wrapper input#search {
	border: none;
	background: none;
	width: 180px;
	padding-top: 8px;
	padding-left: 8px;
	float: left;
}
#sidebar #search-wrapper input#search-submit {
	border: none;
	background: none;
	width: 28px;
	height: 28px;
	display: inline-block;
	cursor: pointer;
}
#sidebar #share {
	margin-top: 15px;
	margin-left: 15px;
}
#sidebar #share a { margin-right: 12px; }

/* Menu */
#sidebar ul.sidebar-menu li {
	background: none; padding-left: 0; /* Remove defaults */
	float: left;
	width: 90px;
	margin-right: 20px;
	border-bottom: 1px solid #d2d6dc;
	margin-bottom: 5px;
}

You may have noticed that if you add widgets to the sidebar in WordPress admin, they get wrapped in a <li>-element, without a parenting <ul>. This is not what we want, we want to use our own wrappings, namely <div>s with the class sidebar-box, which we used on the hard-coded elements and inside the else if there are no widgets placed in WordPress admin. In the next lesson we will write some code to change the default wrappings to all widgets added in our widget areas, which will give all widgets the class sidebar-box. But as for now remove all widgets to enforce the else part of our sidebar, to check if the styling looks right.

Styling the footer

We don’t have much in our footer yet, so it’s not much to style. As we move into widgetizing the footer later in this tutorial we will add much more styling.

/*** FOOTER ***/
#footer { color: #dee9f5; }
#footer a { color: #85bce7; }
#footer a:hover { color: #a7d4f7; }

Styling the comments section

Styling the comments and the comment form make out quite a few lines.

/*** COMMENTS ***/
.comments-template { margin: 25px 0 0 0; }
.comments-template ol {
	padding: 0 0 15px 0;
	list-style: none;
	margin-top: 10px;
}
.comments-template ol li {
	line-height: 20px;
	padding: 15px;
	background-color: transparent;	
	margin-bottom: 8px;  /* Space between each comment */
}
.comments-template ol li.alt { background-color: #FFFFFF; /* The alternating comment */ }
.comments-template .authcomment { background-color: #d6e7fc!important; /* Highlighting author comments */ }

.comments-template h3 { font-size: 16px; font-family: Arial, Verdana, sans-serif; }
.comments-template h3#comments, .comments-template h3#respond { 
	background: url("images/content-band.png") no-repeat top left;
	margin: 0 0 0 -35px;
	padding: 8px 10px 12px 35px;
	color: #dee9f5; 
}
.comments-template h3#respond { margin: 0 0 12px -35px; }

.comments-template ol li .avatar {
	float: left;
	margin: 0 15px 10px 0; 
}
.comments-template .comment-author {
	margin-top: 5px;
	font-size: 14px;
}
.comments-template .comment-date {
	font-size: 11px;
	margin-top: 2px;
	font-style: italic;
	float: right;
	color: #666666;
}
.comments-template .comment-mod { 
	display: block; 
	font-size: 11px; 
	color: #666666; 
}
.comments-template .comment-text { 
	margin-top: 5px;
	width: 410px;
	float: left; 
}
.comments-template p.nocomments {
	font-style: italic;
	margin-top: 5px;
}

.comments-template form textarea {
	font-family: Arial, Helvetica, Georgia, Sans-serif;
	font-size: 12px;
}
.comments-template form p.allowed-tags { padding-top: 5px; padding-bottom: 5px; }
.comments-template form input {
	height: 22px;
	margin-bottom: 10px;
}
.comments-template form input#submit {
	margin-top: 5px;
	height: 28px;
	padding: 2px 2px 4px 2px;
}

As you may recall we use avatars, gave each alternate comment the class alt and gave the blog author’s comments the class authcomment. Otherwise it’s pretty much standard styling on form elements.

The result

If you’ve written and saved all of our above CSS code, this is what our theme should look like. The front page and templates are starting to look good. Even with relatively little CSS we’ve made changes that affects all templates, because of WordPress’s clever functions to provide class names for us. The comments section has been seriously revamped, supporting alternate comments and author comments.

Apart from what we fixed here, we lack post thumbnails and content in the footer according to the design. In the next few lessons, we’ll fix that.

This concludes Lesson 6 of the WordPress Theme Tutorial. Go to the next lesson, Defining Multiple Widget Areas and Customizing Default Wrappings, or back to the tutorial’s Table of Contents.

Share this post:
FacebookTwitterEmailShare