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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.dustindiaz.com polvero

    To this day, STILL, and hopefully someone can please answer this question – I’ve NEVER been able to get the ‘install user script’ menu to be activated after installing greasemonkey.

    Am I completely missing something? Greasemonkey is useless to me.

  • http://www.sitepoint.com Mark Harbottle

    This is probably a bit basic for you techies, but I especially like the tips Kev mentioned in his Firefox Secrets interview on Computer America What converted me was the multi-tab bookmarking and the short cut keywords you can setup for searches. Now I just type “rank sitepoint.com” and it returns our alexa ranking. Very handy!

  • jayesh

    very good article indeed

  • http://www.sitepoint.com AlexW

    To this day, STILL, and hopefully someone can please answer this question – I’ve NEVER been able to get the ‘install user script’ menu to be activated after installing greasemonkey.

    Am I completely missing something? Greasemonkey is useless to me.

    Dustin, I think it’s only ever in it’s activated state when you have a ‘.user.js’ file loaded as text into the window — are you saying it still doesn’t activate then? Is it possible you have another application taking control of your ‘.js’ files?

  • http://www.dustindiaz.com polvero

    you know. it was just that. I clearly overlooked the drag and drop step of putting in the .user.js file. It all makes sense. Except now, the function wrapping in the examples is a little wierd. Maybe that’s a side of js I’ve never seen written before.

  • http://www.dustindiaz.com polvero

    So, one other thing.

    I get the email about ‘The secret is out’ and was offered to purchase the book with a discount for whatever reason.

    Naturally, I went ahead and purchased the book, but it’s seriously been a full week since then. Since it was bought at a discount (which sitepoint was offering), did my ‘lightning fast shipping service’ get taken away?

    I keep hearing how it only takes like 2 days to for a book to travel from one end of the galaxy to the other. What happened?

  • http://www.sitepoint.com AlexW

    I keep hearing how it only takes like 2 days to for a book to travel from one end of the galaxy to the other. What happened?

    I just checked with the lovely Bree, and am reliably informed it will arrive this very day ;)

  • dracona1031

    I just installed greasemonkey 0.3.5, and cskinner, but for some reason the “user script commands” option is inactive… i have no idea what i did wrong. any ideas?

  • Daniel

    dracona1031 – Greasemonkey 0.3.5 has been ‘neutered’ to prevent a security bug. Cskinner relies on parts of GM that have been disabled in this release. I’m afraif you’ll need to wait for the next GM release to get Cskinner working.

  • http://www.dustindiaz.com polvero

    you need to drag and drop a ‘something.user.js’ script onto the browser, then go to the menu.

  • daniel

    ‘something.user.js’ applies to the ‘Install user script’ option. The ‘User script commands’ option is disabled in 0.3.5 due to diabling of the GM API.

  • http://www.sitepoint.com AlexW

    Daniel, thanks for that update.

    What a pain in the backside. Looks like they neutered Greasemonkey at almost the same time as I wrote this little demo. Security-shemurity!

    I wonder how many other scripts are broken now. Hopefully we’ll have a GM 0.3.6 soonish.

  • http://www.sitepoint.com AlexW

    Just a note: Anyone who wanted to try this little Greasemonkey tute , but couldn’t because of the security update, should have no problems if they upgrade to the latest GM version and try it now.