Tutorial Series: How to Edit a WordPress Stylesheet

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.

Tutorial Series: CSS ID’s and Classes

There are two kinds of tags used in CSS to control the look of your page. One is the ID, the other is the Class. ID's should only be used once on a page and they have status over Classes, which can be re-used any number of times. ID's get really useful when you want to use the same class over and over again in different situations, and sometimes you went it to do one thing, while, in some cases, do another. By combining, say a

class tag (standard class for a paragraph) with an ID I've made up of say, id="home-page-first" I can style the first paragraph on the first page of my site to look differently than any other. I had struggled for awhile trying to understand all this, none of my searching online, or the books I'd read, including Grand Master, Eric Meyer's book, seemed to have the answer. It wasn't until FINALLY, I was doing a little coding via my Firebug that it became obvious. This is why I so strongly recommend using Firebug. It will greatly accelerate your understanding of CSS.


I just finished up a little project with Anita Carroll’s site, http://hearingsolutionstriangle.com, of adding a testimonial section to the site. It is amazing what a difference they can make in giving a business credibility, and making it plain what the business or service or practice is doing for people.

So . . . as part of my New Year’s resolutions for my own site, I’m asking you all for any testimonials you might care to give concerning the services I’ve done for you, or if what’s really on your mind are the things you’re wishing I would do for you, LET ME KNOW!!

And I urge everybody to look at asking their patients/clients/customers for testimonials to enhance their sites.

Happy New Year Everybody!!

Publish to small formats or perish

Pressure is steadily increasing for all websites to have mobile-ready formatting in place. Currently, 10% of web traffic is taking place on phones or tablets and this figure is increasing at a rapid pace. It is becoming a situation in which not serving this format means not having a web presence to an important degree.

It is not difficult, or expensive to add this capability. We can install a plugin that, with appropriate customization, will make your site viewable and navigable on a phone or tablet. A recent example of a site customized this way is http://smarthoopsbasketball.com. Serving a teenage audience, it was especially important to make this adjustment. Contact Linda for more information.

Add to Contacts