Firefox – the secret is out

As you may have already noticed, SitePoint’s latest title has just hit the shelves — ‘Firefox Secrets’ by Cheah Chu Yeow. Chu Yeow, in case you don’t know, has run one of the most influential and informative Firefox blogs over the last few years and has been a long time, respected member of the Mozilla community.

Now, I have to admit it took me a while to get around to giving this book a good read. I mean, hey,… I’ve been using Firefox/FireBird/Phoenix since ‘pods’ were nothing more than containers for your peas. What can they tell me about Firefox?

Quite a bit as it turns out. In fact, watching the reactions from Kevin, Tom and others around the office, this book should have been titled ‘Oh, cool!, I didn’t know you could do that!‘. It’s quite eye-opening to realize the really important stuff that you can completely miss.

So, to demonstrate the point, rather than pilfering a cool tip from Cheah’s book, I thought I’d throw in my own little Greasemonkey demo, and leave the value in the book.

Redecorating with Greasemonkey and Cskinner

While we’ve generally had a very positive response to the SitePoint redesign, there have some comments saying the cleaner tones have made the forums brighter than they would like. While we are still fine-tuning the design, here’s an easy way for Firefox users to hand-pick their own forum color scheme.

1. Install Greasemonkey (if you haven’t already ).

2. Go over to thedt.net and install Matt’s Cskinner Greasemonkey script (If you’re new to Greasemonkey, simply click on the link, allow it to load in your browser window as plain text, and go to ‘Tools/Install User Script..’ (as pictured).

3. Navigate to SitePointForums (or any other domain you would like to tinker with).

4. Go to ‘Tools/User Script Commands/Skinner(domain)’. If you’d prefer to only alter the page you are viewing, rather than the entire forum, select ‘Skinner(page)’ instead. You should see a happy yellow ‘text entry panel’ floating above the page.

5. Time to start CSSing. View the source of the page and determine which elements you would like to re-style. I can tell you that the class for styling the left panel (poster’s name) is ‘.alt4’. and the class for the main post panel is ‘.alt2’. Write your CSS directly into the textarea and click the ‘Test’ button. For instance:

.alt4 {background:#879FC0}

Voila! The monkey is loose.

6. Tinker with your colors and when you’re happy, hit the ‘Save’ button to lock your changes in. From now on your styles will override the defaults any time you come to the site (they load last, so give it a second).

7. To change or delete your styling, just go to any page where the script is running, re-open the Cskinner panel and make your edits. Too easy.

Doesn’t it just make you want to rub your hands together menacingly while cackling ‘Come to me, my pretty!…Mwha haha ha ha..‘?

Ok, maybe that’s just me.