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
PreviousCSS: Relative and absolute positioning
Next Say Hello to 2009
firebug mmg byk ah mmbntu.. first time tahu kat blog ni ah.. thank kepada flisterz..
yup. firebug is superb. owh. and another is TAGStention.. http://solutoire.com/tagstention/
helps to add wp code easily and quickly
aku bangga dengan kebolehan anak melayu
gad, ajar la pulak macam mana nak tukar theme wordpress to bloger
bagi aku, firebug tu satu lagi yang perlu disenaraikan sebagai ajaib… haha…
@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.
sgt rajin menulis tutorials..well explained too..kudos!
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
argh..really helpfull
thanks ea!
aku nak lagi boleh?haha
very usefull information!!
akan dipraktikan jika ada masa..
hehe..
thanx for the info!!
What are the values you refer to at the end?
@Kaylene: The ‘values’ there refer to anything you changed earlier using Firebug. In other words, just modify the current CSS in style.css.
artikelnya bagus. sampai skrng sy masih belajar modify style.css
Design web anda keren
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!
@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
kenapa lah baru skrang aku kenal Firebug..
btw..great info!
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?
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..
thanks a lot! its really usefull for newbie like me…
Thanks for the firebug tip, I just started setting up a page and this was very useful!
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
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.
I’ve been looking for some good tutorials to share with a few people and managed to find this one. Great job!
Thanks loads dude been looking around for ages finally found it…thought WordPress would make it alot easier but meh…But yeah its still easy
thanks alot!
xxxxxxxxxxxxxxxxxxx
This info is v helpful. I feel ready to tackle some edits. Say I want to change the header image in my template. I can’t find the image folder from within the WP Dashboard. what gives? I think I’m in WP 2.8
thanks for your article and help here.
thaks for shairing this info
Does anybody know a good theme to start with?
This is by far the BEST tutorial I have seen!!!! You’re so awesome! Thank you!!!!!
Lilly
wow ….
Thanks so much for writing this tutorial – I’ve been hacking my themes via trial & error, this is much more civilised
thanks again!
This was extremely useful. Thank you very much!
Thank you for entertaining a n00b haha
nk buat macam mane your friend is a n00b haha
Thank you. You’re tutorial is very straight.
holy shit. this is the most useful info I ever seen, thanks dude
So ever tried the google chrome inspect element?
Yeh, good things to do
Edit my wordpress theme
I am a freelancer and just starting to work on wordpress theme customization. So this article will help me a lot.
Also I have built a website for freelancers called : http://www.freelancing-on-net.com
I will link this article there so that freelancers can learn how to customize the wordpress theme and make a blog fitting their website design and colour scheme.
This was a great tutorial, thanks,
But I have one question. How do I upload an image from my computer to change the image on the existing theme? What would the URL from my computer be?
Thanks
Thank you X10 for this information. It saved me a lot of time and saved my hair from being pulled.
Great and extremely useful article if you are new with css.