Premium Mod

WooThemes Modding Series Part 3: Customize the Look & Feel

Posted on 29. Nov, 2009 by admin in Tutorials | 2 responses

In this part, we are going to change the look and feel of the theme.

We are going to give a ’stardom’ feeling to the theme (since it will be called ‘Moviestar’). For that purpose, we’ve picked this stock photo as the background image (courtesy of Pixmac):

Changing the Background

First we will change the background.

1. Name your new background image as ‘bg.jpg’. The image is best sized at 1440 x 1830.

2. Place the new background image under the ‘images‘ directory.

3. Go to custom.css (where we will specify all the new styles). Insert these lines:

1
2
3

body {
	background: #03080C url(images/bg.jpg) top center no-repeat;
}

4. Here it go.

Some Refinement

We are almost satisfied. Just almost. So we are going to add some refinements.

1. Like may be add CSS3 transparency to it. Simply, insert these code into ‘custom.css’.:

5
6
7
8

#wrapper {
	background: rgba(255, 255, 255, 0.7);
	border:none;
}

2. A few more refinements: including some color changes and header font-size. Insert all of them into ‘custom.css’:

10
11
12
13
14
15
16
17
18
19
20
21
22
23

.post h2 a, .meta, .meta a, .tags a, .entry a, .commentlist .comment-meta a, .commentlist .comment-meta, .commentlist .reply a, #commentform p a {
	color: #123852;
}
 
.post .label a {
	background: #306E99;
}
 
#header h1 { font-size:4em; }
 
#header h1 a, #header #description, #header h1 a:hover {
	color: #fff;
	text-shadow:2px 0 0 #000;
}

The Results

There you go. The final result from our little interface customization. To learn more about CSS, I sincerely recommend you to check out the book CSS Mastery. Up next, adding extra features.