In this post we're going to analyze the main style sheet of a Wordpress theme. For our example, we've chosen the Amazing Grace theme which, using the words of his author, is a
"lightweight, super-optimized WordPress theme packed with features (SEO, Adsense, Translation and Widget Ready)
". When you download this theme, the main CSS file is located in the main theme directory, namely amazing-grace. All the images used by the main style sheet are located within the images directory. Let's start our analysis from the very beginning.
Theme metadata
At the beginning of every CSS file used by Wordpress for its themes there are a few lines of comments which serve as metadata for the Wordpress theme engine. These comments will be used by Wordpress to assign to every theme a brief description and other additional information to be used in the theme preview:
/* Theme Name: Amazing Grace Theme URI: http://www.prelovac.com/vladimir/wordpress-themes/amazing-grace Description: Amazing Grace is a lightweight, super-optimized WordPress theme packed with features (SEO, Adsense, Translation and Widget Ready). Brought to you by Vladimir Prelovac Version: 3.6 Tags: three-columns, fixed-width, threaded-comments, custom-menu, sticky-post, translation-ready, green, brown, yellow, light, tan Author: Vladimir Prelovac Author URI: http://www.prelovac.com/vladimir/ The CSS/XHTML is released under GPL: http://www.opensource.org/licenses/gpl-license.php */
The information that will be used by Wordpress are contained within the Theme Name, Theme URI, Description, Version, Tags, Author and Author URI tags. As you can see, this is a three-columns, fixed-width theme.
Global styles
Generally speaking, Wordpress style sheets put the global styles just after the theme metadata. This is a general convention borrowed from the best practices used in CSS development. In this case, however, the author follows a slightly different approach: it doesn't stylize all the HTML elements used in the layout, but he defines the general styles for the main page containers used in the layout:
body
{
background:#f8f8ec url(images/bg.jpg) repeat-x top left;
color:#151515;
font-family:Verdana, Georgia, "Times New Roman", Times, serif;
font-size:72.5%;
line-height:1.4;
text-align:left;
margin:0;
padding:0;
}
#wrap
{
position:relative;
padding-top:1em;
text-align:left;
width:1004px;
margin:0 auto;
}
#header
{
text-align:left;
width:1004px;
margin-bottom:110px;
padding:40px 0 0;
}
#portrait-bg
{
position:absolute;
width:319px;
height:219px;
right:0;
top:0;
}
#rss-big
{
position:absolute;
background:url(images/rssbig.jpg);
width:111px;
height:67px;
top:126px;
left:25px;
}
#content
{
font-size:1.1em;
float:left;
width:590px;
padding:0 0 0 1em;
}
#sidebar-left
{
background:#FCFCFC;
border:1px #ccc dashed;
font-size:1em;
float:left;
margin-left:20px;
width:198px;
padding:.5em .2em 2em 1em;
}
#sidebar-right
{
font-size:1em;
float:left;
margin-left:14px;
width:153px;
}
#footer
{
background:url(images/bg-footer.jpg) repeat-x bottom left;
color:#e6e6e6;
font-size:1em;
clear:both;
text-align:center;
padding:1em;
}
Further, the author marks up every style section with the following comment tag:
/************************************* +Containers *************************************/
He uses a plus sign to run a global search-and-find operation when he wants to modify a particular section of his CSS with his editor. As you can see from the above styles, all the element dimensions are expressed in pixels. If your goal is accessibility, however, you should specify relative or fluid dimensions. For example, instead of having the #wrap element with a stated width of 1004 pixels, you can do the following:
#wrap {
width: 100%;
max-width: 1004px;
}
If your target browsers include also Internet Explorer 6, you can remove the max-width property to get the maximum backward compatibility.
Search form
All Wordpress themes have to specify some styles for the default search form provided by the CMS. This theme has the following styles:
.search-form {
font-size:1.2em;
background:url(images/search.png) no-repeat;
position:relative;
width:147px;
height:44px;
margin-bottom:10px;
}
.search-form input{
width:125px;
margin:14px 0 0 10px;
border:0px;
background:#f9f9f9;
color: #454545;
}
The styles are pretty simple: a background image for the main form element and some basic styles for the text and submit inputs contained within it. If you want to get more consistent form elements dimensioning, you should also specify a font family for the inputs (in this case it's Verdana).
Footer
Other elements are contained within the footer section, so the author stylizes them with the following rules:
#credits
{
margin:55px 0 -10px;
}
#footer a
{
color:#E6E6E6;
}
#footer a:hover
{
color:#b2b2b2;
}
.rss
{
background:url(./images/rss.png) no-repeat;
padding-bottom:6px;
padding-left:20px;
}
The negative bottom margin used on the #credits element might cause some problems in older versions of IE. If you experience these problems, you can use negative relative positioning instead.
General HTML elements
To reset and stylize headings, paragraphs, block quotes and other general HTML elements, the author adds the following styles:
a
{
color:#7f9a42;
text-decoration:none;
}
h1,h2,h3,h4,h5,h6
{
font-weight:400;
letter-spacing:-.1px;
margin:0;
}
#header h1
{
font-size:4em;
margin-left:.5em;
}
#header h1 a
{
color:#424242;
}
#header p
{
color:#424242;
font-size:1.3em;
margin-top:-6px;
margin-left:250px;
text-align:left;
font-style:italic;
}
.entrytitle
{
text-align:left;
}
.entrytitle h3
{
font-size:1.5em;
color:#6F6F6F;
}
a:hover,.entrytitle h1 a,.entrytitle h2 a
{
color:#000;
}
.entrytitle h1,.entrytitle h2
{
font-size:2em;
text-align:left;
}
#rss-big a
{
display:block;
width:110px;
height:64px;
}
blockquote
{
display:block;
background:#FCFCFC none repeat scroll 0 0;
padding:2px 10px;
clear:both;
margin-left:0px;
margin-right:0px;
}
pre
{
max-width:580px;
font-size:12px;
padding:10px;
overflow: auto;
clear:both;
}
code
{
font-size:12px;
max-width:580px;
padding:10px;
clear:both;
overflow:auto;
}
There's a syntax error in the letter-spacing declaration on headings: -.1px should be replaced with -1px. Alternatively, you can use -0.1em which has also the benefit of scaling along with text.
Post section
The post section in a Wordpress theme is the main section where your individual posts will appear on the page, either you're viewing your home page or your specific post page:
.entry
{
margin-bottom:0;
text-align:justify;
}
.entry a:hover
{
background-color:#F0F0E0;
}
.entry p
{
margin:0;
padding:0 0 10px;
}
.entry h3
{
font-size:1.3em;
padding-bottom:.3em;
}
.entry h4 {
font-size:1.1em;
padding-bottom:0.2em;
}
.entry img
{
max-width:580px;
margin-left:5px;
margin-right:5px;
border:0;
}
.entrybody
{
padding-bottom:6px;
overflow:auto;
}
.entrybody a
{
border-bottom:1px dotted #CCC;
}
.entry code
{
font-size:1.1em;
text-align:left;
padding:.2em;
}
.entrymeta
{
padding-top:.5em;
color:#b3960e;
border-top:1px dotted #ccc;
margin-bottom:3em;
clear:both;
}
.postedby
{
background:url(./images/user.png) no-repeat;
padding:2px 3px 3px 20px;
}
.filedto
{
background:url(./images/post.png) no-repeat;
padding:2px 3px 3px 20px;
}
.commentslink
{
background:url(./images/packaged.png) no-repeat;
padding:1px 2px 2px 21px;
}
.btitle
{
letter-spacing:-.1px;
font-size:47px;
font-family:georgia, times New Roman;
font-style:italic;
margin:0 0 0 .5em;
}
.btitle a
{
color:#333;
}
.postinfo
{
margin-top:3px;
}
.postinfo img
{
border:2px solid #F8F8EC;
margin:0;
padding:0;
}
.entrydate .dateMonth
{
font-size:10px;
text-align:center;
color:#FFF;
margin:0;
padding:3px 0 0;
}
.entrydate .dateDay
{
font-family:Times New Roman,Helvetica,Sans-Serif;
font-size:21px;
font-weight:700;
text-align:center;
color:#888;
margin:0;
padding:3px 0 0;
}
.entrydate .dateYear
{
font-size:9px;
padding:0 0 0 1pt;
}
.entrydate
{
background:transparent url(images/date.png) repeat scroll 0 0;
float:right;
height:53px;
margin-left:5px;
margin-top:5px;
width:49px;
}
.entrytitle_wrap
{
padding-bottom:1.8em;
}
.avatar
{
color:#FFF;
clear:right;
float:left;
margin:0 15px 0 0;
padding: 2px;
}
img.centered
{
display:block;
margin-left:auto;
margin-right:auto;
}
img.alignright
{
display:inline;
margin:0 0 2px 7px;
padding:4px;
}
img.alignleft
{
display:inline;
margin:0 7px 2px 0;
padding:4px;
}
.alignleft
{
float:left;
}
.aligncenter
{
margin-left:auto;
margin-right:auto;
}
.wp-caption
{
border:1px solid #ddd;
text-align:center;
background-color:#FCFCFC;
padding-top:4px;
border-radius:3px;
}
.wp-caption img
{
border:0 none;
margin:0;
padding:0;
}
.wp-caption-dd
{
font-size:11px;
line-height:17px;
margin:0;
padding:0 4px 5px;
}
.socbook,.alignright
{
float:right;
}
These styles specify display rules for post contents, including images, post metadata and footers, headings, dates and user avatars. Dates are left-floated and their contents are displayed within a container having a background image so that they will always appear near to the very first paragraph of your post. You can change this rule by using float: left, also making sure to zero the left container margin and use its right margin instead.
Sidebar
In a Wordpress theme, the sidebar usually contains a series of unordered lists used to display related content, such as your favorite links, your blog roll, your recent posts and the like:
#sidebar ul
{
list-style-type:none;
clear:both;
margin:0 0 1em;
padding:0;
}
#sidebar ul li,#sidebar ul li a
{
padding-top:.2em;
padding-bottom:.2em;
padding-right:.2em;
}
#sidebar ul li:hover,#sidebar ul li a:hover
{
background:#F0F0E0;
}
#sidebar ul.children
{
margin:0 0 0 10px;
}
#sidebar ul ul
{
margin:0 0 0 10px;
}
#sidebar h2
{
color:#6F6F6F;
font-size:1.5em;
margin-top:1em;
}
#sidebar h4
{
color:#151515;
font-size:1.5em;
}
#sidebar-left #cat
{
width:195px;
border:1px solid #CCC;
}
#sidebar-right #cat
{
width:150px;
border:1px solid #CCC;
}
#sidebar img
{
max-width:140px;
border:0;
}
The images contained within the sidebar uses the max-width property to make sure that they always fit their container without overflowing it. However, you can achieve the same results by turning such images into block-level elements and then use the declaration width: 100% on them. This is also compatible with IE6, which doesn't support minimum and maximum dimensions.
Menus
Two types of menus are generally included in a Wordpress theme: navigation menus and category menus:
/*************************************
+Menu
*************************************/
#menu
{
position:absolute;
width:690px;
margin:0;
padding:0;
height: 31px;
overflow: hidden;
}
#menu ul
{
font-size:1.2em;
list-style:none;
margin:0;
padding:0;
}
#menu li
{
float:left;
border-bottom:0;
}
#menu li a
{
color:#fff;
margin-left:.5em;
display:block;
padding:.6em .6em .3em;
}
#menu li a:hover
{
background:#e6e2af;
color:#424242;
}
#menu ul li ul
{
display:none;
}
/*************************************
+Menu Categories
*************************************/
#catmenu
{
position:absolute;
width:555px;
left:138px;
top:151px;
margin:0;
padding:0;
height:29px;
overflow:hidden;
}
#catmenu ul
{
font-size:1em;
list-style:none;
margin:0;
padding:0;
}
#catmenu li
{
float:left;
border-bottom:0;
}
#catmenu li a
{
background:#bfbc94;
color:#000;
margin-left:.5em;
display:block;
padding:8px 10px 5px;
}
#catmenu li.current-cat a
{
background:#a7a37e;
color:#fff;
margin-left:.5em;
display:block;
padding:8px 10px 5px;
}
#catmenu li a:hover
{
background:#a7a37e;
color:#fff;
}
#catmenu ul li ul
{
display:none;
}
Absolute positioning has been used to exactly position these menus on the page. Either you're using floats or positioning, always remember to specify some dimensions for your elements to avoid problems in IE6 and 7.
Comments
Comment sections are made up of two parts: a form to insert your comments and a displayed list of already inserted comments. Each Wordpress theme has its own way to style this section:
.commentsblock,contactform
{
font-size:1em;
clear:both;
padding-top:20px;
}
.commentsblock textarea,.contactform textarea
{
width:538px;
}
.commentsblock input,.commentsblock textarea,.contactform input,.contactform textarea
{
border:1px solid #d1d1d1;
}
.commentauthor
{
display:block;
font-size:1.5em;
}
ol.commentlist
{
color:#505247;
font-size:1em;
list-style-type:none;
margin:1.5em 0 0;
padding:0;
}
ol.commentlist a
{
color:#b3960e;
}
ol.commentlist a:hover
{
color:#424242;
}
.commentlist li
{
margin-bottom:.5em;
padding:8px;
overflow:auto;
}
.commentlist p
{
text-transform:none;
font-size:1em;
margin:10px 5px 10px 59px;
}
.commentlist blockquote p
{
margin:10px 5px;
}
.commentlist blockquote
{
margin:10px 0 10px 59px;
}
.commentlist .children
{
padding-left:0px;
}
#commentform p
{
margin-left:0px;
}
.alt
{
background:#e3e7cb;
}
.comment_headings
{
font-size:1.3em;
color:#6C6C6C;
}
.vcard
{
font-size:1em;
}
.vcard cite
{
font-weight:700;
font-size:16px;
}
.commentsblock textarea:focus,.contactform textarea:focus,
.commentsblock textarea:focus,.commentsblock input:focus,
.contactform textarea:focus,.contactform input:focus
{
background:#eee;
border:1px solid #a1a1a1;
}
Inserted comments are generally displayed using a list which contains a blockquote element inside each item.
Theme-specific sections
Every theme may add some specific sections to its pages. Generally, these sections are put at the end of the style sheet. As a rule of thumb, you should always specify your custom sections just after the common sections.