With the release of my DIYTheme last week, I promised I would show you step by step how to customize it. I know there are a lot of people who would probably like to change some things about their current theme, but just aren’t sure where to begin, and don’t want to go editing code because they’re afraid they might completely screw it up and not be able to fix it. My aim in this article is to show you a way to play around with your CSS risk free, and then to show how to make a simple font color change using the DIYTheme as an example. (If you’re unsure what I mean by CSS, you might want to watch my Basics of CSS sketchcast first.)
If you only have IE on your computer, you will need to get Firefox, and then get the add-on for Firefox called Firebug. Once that is installed you will see a little bug icon in the bottom of your browser: 
Open the web site you’d like to edit, and click once on that icon. That should open a pane at the bottom of your screen that looks like this:
One of the things you can do with Firebug is edit the CSS for the page right in that pane, and see the results of the changes you made in the page above immediately. This does not affect the CSS that is saved in your WordPress theme editor at all – this is just temporary in the window/tab you have open in Firefox.
Edit the CSS in Firebug
So, let’s say you’ve downloaded the DIYTheme and you like the header with the water droplet and you want to change the sidebar headings to a blue color to match. You can see what piece of the CSS the headings are styled in by clicking CSS and then click Inspect. Then mouse over the elements in the page – see how they get a blue box around them? Mouse over one of the sidebar headings and then click on it once, to tell Firebug that’s the element you want to inspect. In the right side of the Firebug pane, you’ll see the various pieces of CSS code that affect that heading. If I do this in the DIYTheme demo, I see this:
H5 designates the heading, and below it are the styles applied to that heading. The first line says “color: #000000” which means the font color is styled with the color code for black. Now we need to go find that piece of CSS and edit it. In the Firebug pane, click CSS then click Edit, and scroll down until you see that section of code- about a quarter of the way down in the DIYTheme. Then you can click on the color code and change the 000000 to something like 003399 for a nice blue color, (check this page out for a list of hexidecimal color codes) and voila, you have blue headings!
Edit the CSS in your theme
If you’ve made changes you like, and would like them to be permanent, then do the following:
- Go into your Admin panel in WordPress, and go to the Presentation tab and click on Theme Editor.
- Make sure you’re in the Stylesheet file, and first make a backup copy of the CSS by selecting all of it and pasting it into a Notepad document on your computer.
- Then make the same change in the CSS as you did using Firebug, and then click the Update File button at the bottom.
- If you make lots of changes and just want to copy over the entire file, you can highlight all the code in Firebug (Cntl-A to select all, Cntl-C to copy it) and paste it over top of your current CSS (Cntl-A to select all, Cntl-V to paste the new code over top), and then save.
I would encourage you to play around with the CSS in Firebug, to get comfortable with making changes. You might want to refer to the CSS Reference Guide to see all the different types of style selectors that are available to you. It’s a great way to learn CSS and to get comfortable making changes with no worries!
Any questions? Ask in the comments!