For some new users out there who are still clueless on how to modify your theme to your liking, this post is definitely for you. I’m focusing here on WordPress (not Wordpress.com) users, but if you’re not one of them, you still can follow on, as long as you have access to your CSS file.
First step: The tools
For this tutorial, you’ll need to have some stuff. The main tools is the most awesome Firefox plugin ever, Firebug. That means you have to use Firefox browser (you know, the most awesome browser out there?). Download the plugin, and install it right away. You won’t regret it. You can even use it to download free mp3s! (not covered). You also need a text editor for CSS editing. Notepad would be enough if you don’t have any other advanced options.
As an alternative, you can also edit edit your CSS directly from the WordPress dasboard. Go to ‘Appearance > Theme Editor’ for the new WordPress 2.7 users and ‘Design (or Presentation) > Theme Editor’ for old-school users. Make sure you have the “Update File” button at the bottom of the page. If no, you’ll need to CHMOD your file through FTP. Let Syuxx teach you how to do that.
Second Step: Learn to use Firebug
Now you’re ready to use Firebug. Lets learn some basic stuff. Go to the page you want to edit, right-click and click Inspect Element. Or simple click that cute bug icon at the bottom right of your browser.
Then you’ll get this thing on the bottom part of your browser.
Click on the Inspect button on the top left side of the panel, then move your cursor around the page. Click on any of the element on the page to see their CSS properties on the right side of the Firebug panel.
Go on, click on those values, and play around with it. You’ll see live changes on the website. Cool huh? Note that anything you changed here is just a preview, it will not affect your theme at all. So don’t be afraid to change anything.
You can also disable certain properties: click on the left side of the property. To add a new one, click on the last line, and press Enter/Return. Simple!
Third step: Modify your CSS
Now you’re ready to start to get geekier. Decide what you are going to change in your theme. Do the same thing you did in the second step.
Maybe you can use some common sense if you have no idea what those CSS properties mean. Margin? Padding? Float? What are those? Well, if you really want to know those, you’ll need to look for some CSS basic introduction. Maybe w3schools can help you with that. Other than that: height, width, color and font sound easier, right? What are those #333333, #F3F3F3 thing? Those are Hex color code. For your color. Here is a source for Hex color code to help you.
*****
For an extra example, if you wantws to change a header image, the code probably look something like this.
#header{
background: #ffffff url(images/header.jpg) no-repeat top left;
width:960px;
height 50px;
}
To use another image for your header, just change the part inside the url(…) with the location of your new images. Adjust the height and width accordingly.
*****
Now that you got the right idea what to change and what to add/edit to your CSS file, open your style.css file from your theme folder.You need to locate where you need to add/edit the properties you experiment with Firebug just now.
From this example, you’ll need to locate #navigation in the style.css file, on line 75. Use the Find function in you text editor to find it (or you can just scroll down manually if you have sharp eyes).
If you’re using Theme Editor in the WordPress dashboard, you need to find it manually though.
Change the values in the style.css, save it and upload it to your hosting.
And you’re done!
Extra tips.
It is recommended that you modify your theme locally, off the internet. Meaning, you modify your theme completely in you computer before you upload the entire theme into your host. Save much time rather than to rely on those sucky internet connection. Learn how to install Wordpress locally: Windows and Mac
izzat aziz —
24 Dec 08 / #firebug mmg byk ah mmbntu.. first time tahu kat blog ni ah.. thank kepada flisterz..
kodin —
24 Dec 08 / #yup. firebug is superb. owh. and another is TAGStention.. http://solutoire.com/tagstention/
helps to add wp code easily and quickly
Richie —
24 Dec 08 / #aku bangga dengan kebolehan anak melayu
Zuriani Y. —
24 Dec 08 / #gad, ajar la pulak macam mana nak tukar theme wordpress to bloger
Khai —
24 Dec 08 / #bagi aku, firebug tu satu lagi yang perlu disenaraikan sebagai ajaib… haha…
flisterz —
24 Dec 08 / #@izzat: sama-sama
@kodin: that one is for those who are using Dreamweaver. thanks for sharing though.
@Richie: woah tq
@Zuriani: haha yg tu aku pun x reti lagi
@Khai: haha mungkin boleh.
irdzra —
24 Dec 08 / #sgt rajin menulis tutorials..well explained too..kudos!
syuxx —
25 Dec 08 / #stylish add-ons is kinda cool too.
and also remembered to install the webdeveloper add-ons. It do help too.
but edit it offline is much more better.
use notepad++ or other alternative.
i wish that coda also exist in windows. haha
kusu —
28 Dec 08 / #argh..really helpfull
thanks ea!
aku nak lagi boleh?haha
Jaws —
28 Dec 08 / #very usefull information!!
akan dipraktikan jika ada masa..
hehe..
thanx for the info!!
Kaylene —
31 Dec 08 / #What are the values you refer to at the end?
flisterz —
31 Dec 08 / #@Kaylene: The ‘values’ there refer to anything you changed earlier using Firebug. In other words, just modify the current CSS in style.css.
dedyisn —
01 Jan 09 / #artikelnya bagus. sampai skrng sy masih belajar modify style.css
Design web anda keren
adi —
15 Jan 09 / #salam bro! sori menyampuk! nk gune firebug tu kene tukar file permission dlu ke? camne nk wat erk? erm lagi satu camne nk bt .htaccess file tk bleh write la.. dh try cari kt web tp tk paham la plak…heheh!
flisterz —
15 Jan 09 / #@adi: hmm x perlu pun tukar permission tu. dah ckp kat dalam artikel, ape yg diubah kt Firebug xkan ubah di CSS asal. kena manually ubah sendiri. firebug tu just tunjuk live preview ape berubahan yang berlaku
flip9 —
16 Jan 09 / #kenapa lah baru skrang aku kenal Firebug..
btw..great info!
Ken —
04 Feb 09 / #Hi, I have some weird experience with CSS in WP 2.7. Whenever I update my CSS in my blog, the style is not changing. I’ve try to clear my WP-Super-Cache (0.89) and clear my browser cache. But I still can’t see the real changes which I’ve made in my CSS.
You can see it in my blog. The background should be Valentine wallpaper now with some countdown text. But it seems in my end still showing the default bg image. Do you know how to fix this?
Marcellinus —
01 Apr 09 / #Hi,
Macam nak save the changes atau kita kena copy everything & upload kat wordpress editor? Any other way? FYI, I try to use WebTide text editor? Tolong..
applepie —
22 May 09 / #thanks a lot! its really usefull for newbie like me…
Walter —
20 Jun 09 / #Thanks for the firebug tip, I just started setting up a page and this was very useful!
4Techteam —
25 Jun 09 / #Great information. I was just purchased the Word press themes but wonder how do I edit it… I want to change my web views.
Thanks
elgms —
30 Jun 09 / #What about actually editing the theme at wordpress.com? I want to change the sidebar to display a feed from my forum to display the recent post, and change some other stuff.