Cardeo Design Blog, Code, Design, WordPress, Minimal, CSS, Freebies, Twitter, Facebook, Social Media

WordPress CSS Post Checklist

October 13th, 2008

When you are designing a WordPress theme, there are a number of things you need to consider. One of the main ones is the built in posting styles. wpcandy.com has a great Sample WordPress Content post where you can download a collection of sample posts. Import the sample posts to your blog and you’ll have a great testing template.

The styles I’m going to concentrate on here are: blockquote, .alignright, .alignleft, ul, li, ol, and all the h1-h6 tags.

blockquote

blockquote is one of the styles where you can have a little fun and do something interesting. I’m kind of a minimalist so I generally prefer to just add some padding and a background color. This is displayed in the blockquote below. Feel free to customize this any way you like.

blockquote {
padding: 20px;
margin: 0;
background-color: #ebebeb;
}

.alignright

The .alignright class effects images in a post that have been set to align right. You should add a bottom and left margin around the image(s) so they display nicely in the flow of the post.

.alignright {
margin: 0px 0px 10px 10px;
}

.alignleft

The .alignleft class is the opposite of .alignright and refers to images in a post that have been set to align left. For this class I would recommend adding a bottom and right margin as below:

.alignleft {
margin: 0px 20px 20px 0px;
}

ul

All of the list properties are most likely an obvious edit but I thought I would include them anyhow for any beginners out there. “ul” is the name for an unordered list – so any list that is not numbered. A couple basic styles that are recommended are margin, padding, and list-style-type. I would set your margins to 0 in most cases. Padding can also be 0 unless you would like to indent the list items or pad them vertically. list-style-type will tell the browser if you wish to display bulletpoints (and what type) or not. I generally set this to no in the ul and define it in the li. Here’s an example:

ul {
margin: 0;
padding: 0px 0px 10px 0px;
list-style-type: none;
}

li

The li property refers to the actual list item line. If you would like to include a bullet point for your list, this is where I usually will define it. Adding square to list-style-type will, yes you guessed it, produce a square bullet point.

li {
list-style-type: square;
}

ol li

I’m going to skip over talking about ol on it’s own. It is essentially handled the same way as a ul for basic use. ol is short for “ordered list” or a numbered list. We just need to add one line to our style sheet to have the numbers appear.

ol li {
list-style-type: decimal;
}

h1-h6

I’m not to going to list examples for each of the header tags. Instead I’m going to recommend you use a number of properties to reset the values (so you can set them to your liking). As well, it’s good practice to have the h1 as your biggest point size title, with the size decreasing as you move down your header list. I don’t always follow this method but rules were made for breaking (slaps self in the face – bad cliche). Here is an example on setting up a couple of your header tags:

h1 {
font-size: 24px;
color: #09c;
font-weight: bold;
margin: 0;
padding: 0;
line-height: 36px;
}
h2 {
font-size: 18px;
color: #09c;
font-weight: normal;
margin: 0;
padding: 0;
line-height: 24px;
}

Ok, that’s it. Make sure you download the sample posts from wpcandy.com. Hopefully this has been of some help to all you wordpress theme designers. If you think I’ve missed any critical styles, please leave a comment below.

Tags: CSS, Design, development, styles, theme, Wordpress