As part of my effort to be a useful consultant to my clients who want to manage their sites as much as possible, I will be publishing articles here on how to go about that process. First, I’m offering this tutorial on how to use Firebug, an amazing editing tool from Firefox, to manage the formatting of your site.
1. Download and install PSPad at http://www.pspad.com/en/ I’m very pleased with it. It can connect via an ftp client directly to your files online and enable you to edit them with the least amount of clicks I’ve found.
2. Go to the download page linked on the left, there’s another download button at the bottom that’s for a pdf creator, avoid that. This is free stuff, so it tends to have other junk thrown in, just be on your toes to avoid downloading something unnecessary. You can just download the zip, install that to whatever folder you want and click the .exe file. It doesn’t install, per se, on your machine, it just loads itself every time. I created a shortcut of the PSPad.exe (Right click > create shortcut) then I dragged the shortcut onto my desktop, then right clicked to pin to taskbar.
3. Open PSPad. Click the ‘FTP’ icon. Click the icon that looks like a plug. Click “New Connection” Enter in the ftp info for your site. Navigate to: wp-content/themes/[your theme name]/style.css to open.
4. Open Firefox. If you don’t have Firebug installed, do so now. You’ll be guided on how to install. Once installed, right click anywhere on your page (preferably where you want to edit). Click on “Inspect element with Firebug”. A grid will open up on the bottom of your page. The HTML code for your site will be on the left, the CSS is on the right. Wherever you were on the page, that will be highlighted on the left, and on the right, is all the CSS code that’s governing that part of the page. So, let’s say I just highlighted the header and I want to change the color. I could go over to the right and click on the hex #s for the h1 color and make it what I want. It will then be displayed, temporarily, for you alone, on your website. Once you get it the way you like. Copy and paste the CSS code. Take note of the line number. Take it over to you PSPad, where you have your stylesheet open, find the line number where that code is, and plop it into the code. It’s best to just copy the stuff that’s changing, leaving the rest intact.
That’s it. You’ve learned how to start altering your site to look the way you want it to, using Firebug. This is much better than opening the WordPress admin editor, if for no other reason than that it will give you no line numbers. You’ll waste a lot of time just finding the code you need to change permanently. There are other helpful features to PSPad that will make it a much easier tool to work with.
