My Themes’ CSS Structure

Posted by on Jun 1, 2009 in About My Themes | 3 comments

WordPress is a powerful CMS program that is capable of turning a complicated graphic design into a web page. You can see a list of 50 stunning template designs that are running on WordPress here. The design of these websites may look complicated but if done in an organized way, they aren’t really hard to code.

From the designers’ perspective, a website can be divided into 5 main sections:

  • Background
  • Header
  • Content
  • Sidebar
  • Footer

There are several elements found in the main sections where you can define the styles. The styling of each elements can be controlled in the css file. Normally, we name it style.css.

Different designers have their own ways of doing it. I’ll show you how I configure my CSS file in an well-organized way. I made it easy to understand so you can modify the styles of each element without much difficulties.

Open any of my themes’ style.css file and you’ll see that I grouped them into 9 categories:

  • General
  • Layout
  • Header
  • Menu
  • Content
  • Sidebar
  • RSS and Search
  • Comments
  • Widgets

The elements found in each category below are general items and differ from theme to theme.

1     General

This section include general elements like body font and link style, image alignment, font size of H1, H2, H3, H4, H5, H6, blockquote style, break line(hr), field input style etc.

body{;}
img {;}
a {;}
a:hover {;}
h1 {;}
h2 {;}
h3 {;}
h4 {;}
h5 {;}
h6 {;}
p {;}
hr {;}
del {;}
ins {;}
blockquote {;}
input,select,textarea {;}
code{;}
.alignleft {;}
.alignright {;}
.aligncenter,div.aligncenter{;}
img.alignleft {;}
img.alignright {;}
img.centered {;}
.clear {;}
.spacer {;}

2     Layout

This section controls the image and position of the background, header, menu, content, sidebar, RSS and footer.

/********** LAYOUT **********/
#base{;}
#menu{;}
#header{;}
#container_btm{;}
#container{;}
#content{;}
#sidebar1{;}
#sidebar2{;} [if the theme is 2 column, sidebar2 is not needed]
#rss_search{;}
#footer{;}
#footer a{;}

3     Header

This section controls the position and text style for the blog title, blog tagline (subtitle) and the header image position.

/********** header *************/
#blogtitle{;}
#blogtitle a, #blogtitle a:hover {;}
#subtitle {;}
#header img.home {;}

4     Menu

This section controls the display of the page menu link which can normally be found in the header.

/************* MENU ***********/
#menu ul {;}
#menu ul li {;}
#menu ul li a {;}
#menu ul li a:hover{;}
#menu ul li.current_page_item a {;}

5     Content

This is where the content section is defined. You can change the setting of the normal or the sticky post, post title, post date and the page information.

/************* content *************/
.archivetitle {;}
.post{;}
.sticky{;}
.post_title{;}
.page_title{;}
.post_title a,.post_title a:hover,.page_title a,.page_title a:hover{;}
.post_date{;}
.post_date_d {;}
.post_date_m {;}
.post_author{;}
.post_author a{;}
.entry{;}
.info {;}
.category {;}
.tags {;}
.bubble {;}
.navigation {;}
.navigation {;}
.sorry {;}

6     Sidebar

Control the everything related to the sidebar which includes the image position, text, links and fields styles etc.

/************ sidebar ************/
#sidebar1 {;}
#sidebar1 a{;}
#sidebar1 a:hover {;}
#sidebar1 ul {;}
#sidebar1 li {;}
#sidebar1 h4 {;}
#sidebar1 ul ul li {;}
#sidebar1 select{;}

#sidebar2 {;}
#sidebar2 a{;}
#sidebar2 a:hover {;}
#sidebar2 ul {;}
#sidebar2 li {;}
#sidebar2 h4 {;}
#sidebar2 ul li{;}
#sidebar2 ul ul li {;}
#sidebar2 select{;}

Note: sidebar2 is not needed if the theme is 2 column.

7     RSS and Search

Control the position of RSS icon, position and text style of the RSS as well as the search input area.

/*********** RSS and Search ***********/
#rss_search .input {;}
#rss_search .submit{;}
#rss_search a.rss{;}
#rss_search a.rss:hover{;}

8     Comment

You can control the comment section that includes the avatar, nested comments, paging, pingbacks and trackbacks etc.

/************ comment ************/
#postmetadata {;}
.nocomments {;}
#comments {;}
.commentlist {;}
.comment,.trackback,.pingback{;}
.comment .children{;}
.comment div, .trackback div, .pingback div{;}
.trackback div, .pingback div{;}
.comment div div,.trackback div div, .pingback div div{;}
.comment .says, .trackback .says, .pingback .says{;}
.comment .avatar{;}
.comment .fn,.comment .fn a,.trackback .fn,.trackback .fn a,.pingback .fn,.pingback .fn a{;}
.byuser .fn a{;}
.bypostauthor .fn a{;}
.comment .comment-meta,.trackback .comment-meta, .pingback .comment-meta{;}
.trackback .comment-meta{;}
.comment .comment-meta a, .trackback .comment-meta a, .pingback .comment-meta a {;}
.comment .reply{;}
.comment .reply a{;}
.trackback .reply, .pingback .reply{;}

/**comment paging WP2.7**/
.commentnavi{;}
.commentpages{;}
.page-numbers{;}
.current{;}

/*** comment form ***/
#respond {;}
.cancel-comment-reply{;}
#commentform {;}
#email, #author, #url {;}
#comment {;}
#submit {;}

9     Widget

This section controls the widget setting. You can add your own widget and define the setting here.

/********** WIDGET **********/
#wp-calendar td {;}
#wp-calendar {;}
.wp-caption {;}
.textwidget {;}
#akismetwrap{;}
.rsswidget img {;}
#sidebar h1 a.rsswidget{;}
.wp-smiley{;}

3 Comments

  1. cool thanks! i like this explantion! very usefull for wordpress!

  2. how to change my gravatar from your template?

    • @Arif, your gravatar is defined in the admin of gravatar.com and my themes will retrieve your icon base on the email you define in the WP admin.

Leave a Reply

Your email address will not be published. Required fields are marked *

Experience ThemeMask

View a mask:

Get the masks now!


Theme runs on
Elegantthemes Chameleon