Read this WordPress Tutorial on How to Change the Look of Your Blog
If you have followed blog software installation guide and successfully installed a blog using open source WordPress software, then you probably want to change the way your blog looks like. In that case, you gonna have to edit the cascading style sheet file and a few php include files that reside in your WordPress themes folder.
You should know that if you use any of the blog services, then you’ll have much less options on how to edit your blog’s interface. So if you want to have editable blog, it’s highly suggested to install open source WordPress blog software on your web hosting account.
Making a Copy of Your Default Blog Theme
If you have followed the instructions on how to move the blog navigation bar from right to left, then by now you should have a blog that has no images and has links menu on the left side.
Your blog should look like this:
Of course, you’ll be able to add your own pictures or anything you want later. But for now, let’s try to design this blog so it would look much better and would be more user-friendly.
The first thing you’ll want to do is go to your blog folder that is in your website folder and navigate to:
Blog > Wp-content > Themes
You’ll see two folders. Classic and Default. These are the themes of your blog. As long as we’ll be working with the default theme, you should make a copy of this folder. You’ll need to make a copy, because if you decide that you don’t like the changes you’ve made to your blog, at any time you can switch back to your original theme in your blog’s admin area.
If you have made a copy of your default theme folder, you can name it “custom” so you know that it’s the theme that you’re customizing. Now you have to upload your new theme into your web server. After that, login into your blog admin area and go to “Presentation” section. You’ll see a similar picture:
You’ll see that there are two “Wordpress Default 1.5” themes. You should notice a message that says that all the theme’s files are located in /themes/custom. This means that you have successfully installed a new theme that you can customize and make it look like you want. If you don’t like it, anytime you can switch these themes from your admin area.
Changing Background Color and Borders
Now sign out from the online admin area and go back to your website’s blog folder. Open the file style.css using a WordPad or any other text editor that shows the style coding in a proper way.
For a start, we’ll try to change the background color and the borders of your blog. In the CSS file, search for this string:
body {
font-size: 62.5%;
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background-color: #d5d6d7;
color: #333;
text-align: center;
}
and change the background color to white, like this:
body {
font-size: 62.5%;
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background-color: white;
color: #333;
text-align: center;
}
Now your background color is white instead of grey (you can use any color you want in this case).
Your borders are also grey. If you want to change the color or simply remove the borders, search for:
#page {
background-color: white;
margin: 20px auto;
padding: 0;
width: 760px;
border: 1px solid #959596;
}
Note that there are two instances of “#page” element in CSS file. Don’t mix them. Find the one that looks exactly as shown above and replace it with:
#page {
background-color: white;
margin: 20px auto;
padding: 0;
width: 760px;
border: 1px solid #FF9933;
}
Now your borders should look orange. Again, you can add your own color if you want. But in this example you’re just practicing so you know which elements to change to make the blog look like you want.
Changing Blue Header of You Blog
One other thing that you might want to change is the header of your blog. It might look too large or you simply would like to change the color. Don’t worry, it’s quite easy to do.
In the CSS file search for “header”. You should find this string:
#header {
padding: 0;
margin: 0 auto;
height: 200px;
width: 100%;
background-color: #73a0c5;
}
Replace the code above with this:
#header {
background-color: #fc0;
border-bottom: 1px solid #f93;
width: 100%; height: 100px
}
Right below this code you’ll find another string called “headerimg”. Now replace that string that looks like this:
#headerimg {
margin: 0;
height: 200px;
width: 100%;
}
with this piece of text:
#headerimg {
margin: 0;
width: 100%;
height: 100px;
}
And last thing you should do is search for “h1” and find this string below:
/* Begin Headers */
h1 {
padding-top: 70px;
margin: 0;
}
Now replace it with this code below:
/* Begin Headers */
h1 {
padding-top: 30px;
margin: 0;
}
Now your header will have yellow color and will be twice shorter.
Colorizing Your Blog Title’s Description
The next thing you’ll want to do is edit the color of your title’s description. Find this string of code by searching for “h1”:
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
text-decoration: none;
color: white;
}
and change it with:
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
color: #CC3300;
text-decoration: none
}
Your blog title’s description will be dark red. You’ll want to change the color of your footer too. Search for “footer” in your CSS file and find this snippet of code:
#footer {
background-color: #eee;
}
and change the line above with this text:
#footer {
background-color: #ff9;
border-top: 1px solid #f93;
}
Now your footer is not grey anymore, but yellow.
You might also want to change the color of the text in your postings and also the color of your links. In that case, search for “post”. You should find this one below:
.post {
margin: 0 0 40px;
text-align: justify;
}
Replace it with the one below:
.post {
color: #999;
margin: 0 0 40px;
}
Now your content (posting) text is grey. Also it is not justified anymore. That means your text will not try to stick to the left and to the right sides of your blog.
Finally, you can change the hover link colors in your blog. Go and do a search for “hover” in your CSS file. You’ll get this:
a:hover {
color: #147;
text-decoration: underline;
}
Now change that to this:
a:hover {
color: blue;
text-decoration: underline;
}
This will change the hover color to blue on all links. Now if you want to change the main link color and a color when a link is visited, you’ll need to add a few lines into the CSS file.
Simply copy and paste these lines below right above the “hover” style element:
a:link {
color: red;
}
a:visited {
color: purple;
}
These lines tell that the link color will be red and when people see a link that’s already visited, they’ll notice a purple color. You can also change your search form style. In the CSS file search for “Begin Form Elements” and you should find these lines:
/* Begin Form Elements */
#searchform {
margin: 10px auto;
padding: 5px 3px;
text-align: center;
}
#sidebar #searchform #s {
width: 115px;
padding: 2px;
}
#sidebar #searchsubmit {
padding: 1px;
}
Now replace all these three styles with this code below:
/* Begin Form Elements */
#searchform {
margin: 10px auto;
padding: 5px 3px
}
#sidebar #searchform #s {
padding: 2px;
border: solid 1px #f93;
width: 150px
}
#sidebar #searchsubmit {
background-color: #ff9;
padding: 1px;
border: solid 1px #f93
}
This removes the centering in your search form and changes the colors, and also adds borders to your search field and button, so your search form looks little nicer.
Now save your CSS file and upload it to your server. After that go and check out your blog. It should look like in the image below:
If the final result doesn’t satisfy you, you can use your own colors instead of the ones provided. However, this blog design doesn’t use any images and thus loads much faster.
In Summary
Although, the look and style of your blog may not be what you expected, you can always switch it back to original style. You can also put your own color values and have it look the way you want. It is always better to have your own style of blog than borrowing from someone else. Play around with these colors and you’ll be able to have your own blog design.
