05/02/04
Edit CSS in Firefox
Quick tip if you haven’t come across this before. There is an excellent web development extension available for Firefox called Edit CSS. Quite simply, it allows you to view all style sheets for the current page in the sidebar, make edits and see the result as you type. The amount of time this saves is amazing.
A problem with many firefox extensions is that they break in current and mac builds, and this is the case here. The useful option to save the css once edited doesn’t work. Even with this bug, its a worthwhile download.
Update 11.02.04: All thats needed to make Edit CSS work fully, is the jslib extension. Now I can save edited styles, or load new ones. Thanks to John for pointing this out.
Perfect for deciding on that new colour scheme… ;o)
Tags: 
Previous
Download our vCard
Lars said 1559 days ago:
Yuck.I absolutely agree on the usefulness of the extension though. Someone should do just as nice an overview of, say, the 10 most useful Firebird extensions.
Hint, hint... :)
Jai said 1559 days ago:
I use this extention quite a bit. Sometimes I even use it when I'm bored to make sites look different. I found it seems to have issues with floats and things, but for genral color stuff it's fantastic. But um... Jon... that example you put up there with the pink and yellow Hicks design... um, I know you're color bliond and all but... please don't make that your site design!Jon Hicks said 1559 days ago:
c'mon people - you know I'm joking surely?Jai said 1559 days ago:
:) surely! Like an organist at a church service :P... swing low, sweet chariooooot...Jayme said 1559 days ago:
Jon, what theme are you using for Firebird, and where did you find it? Just curious. It's nice and Safari looking.Jon Hicks said 1559 days ago:
Jayme - if you download a recent nightly build, its the default theme! Sweet isn't it? It makes such a big difference.I think the latest is at:
http://ftp.mozilla.org/pub/mozilla.org/firebird/nightly/2004-02-04-02-trunk/Firebird-mac.dmg.gz
Version 0.8 is due for release on Monday, and the theme will be 'official' in that.
Carlo Zottmann said 1559 days ago:
Jon, try the excellent bookmarklets @ squarefree.com:http://www.squarefree.com/bookmarklets/webdevel.html
Nothing to install, won't break your browser, more flavas. ;) Make sure to check "edit styles" and especially "shell".
You'll love it.
Carlo
Jon Hicks said 1559 days ago:
Sure, I use a lot of these - what I loved about the extension was the way it worked within the browser.Shame they don't work in Safari (that's Apple's fault, not Jesse's!).
Scott Johnson said 1559 days ago:
Wow! I'll be installing this tonight! Now if only we could get something like this for (ick!) IE...that would prevent plenty of migraines.Matthew Welle said 1558 days ago:
Is it bad that I'm almost looking forward to Monday, just because of Firebird 0.8?Someone needs a bit of R&R!
Carlo Zottmann said 1558 days ago:
No, that's understandable and I can totally relate to it, Matthew. ;)Jon Hicks said 1558 days ago:
Mondays release is going to be a bit different too. Watch this space...Matthew Welle said 1558 days ago:
Oh cmon, that's not fair :)Jon Hicks said 1558 days ago:
Its only a couple of days...Lars said 1557 days ago:
But you can tell us, Jon. We are your friends. You know you want to. We won't tell anyone...Jon HIcks said 1556 days ago:
Lars - I like the idea of the 10 best extensions. What we'd have to first is find 10 that work in both PC and Mac.The web developer extension would have to be on the list too:
http://chrispederick.myacen.com/work/firebird/webdeveloper/
Chris Neale said 1555 days ago:
Firefox ?any mention of my extensions, or those I've been associated with ?
Lars said 1555 days ago:
I wouldn't mind contributing a short write-up (with screenshots, if necessary) for one or two extensions, should you or anyone else have such plans. Perhaps someone else could chip in too?I'm using Compact Menu, mozCalc, Style Selector, Tabbrowser Extensions (I think there are two tabbrowser extensions available, the one I'm using is by a Japanese guy).
I haven't checked Mac compatibility for any of these (server seems down at the moment), but I agree it would be nice if all ten worked cross-platform.
Lars said 1555 days ago:
I forgot Checky.Colly said 1555 days ago:
CSS edit is working wonderfully with Firefox so far. I'm not yet sure how much of my time it will give back to me, but it's looking good. Thanks Hicks...John said 1553 days ago:
Note that if you install the jslib extension, it adds the support needed for the load and save buttons in this extension. (No idea if that works on the Mac or not.)Jon HIcks said 1553 days ago:
John - thanks so much! It does indeed work on OS X! I'll have to update the entry...dojob said 1552 days ago:
well, everytime i try to install one of these on my Mac, Firefox crashes on me :^(Jon Hicks said 1552 days ago:
Thats the problem I've had with most, but Edit CSS should be OK.dojob said 1551 days ago:
ok, the latest nightly build solved the problem, thanks a lot for the hintyou did a great job in skedit and firefox's icon is just great
Erkki said 1551 days ago:
Hi Jon & thanx for your amazing work :-)About Firefox extension installation on Mac os X 10.2.8:
As many users it was obviously not possible to install any extension from Firefox (assuming it's a fresh install not an update from Firebird 0.7), result would be crash after crash after crash... In a single word: outrageous!
Then after looking for a solution for this problem and checking Firefox forums, I found the following in order to have (Firefox compliant) extensions to work in the official Firefox release:
1- Delete Firefox (including Mozilla Folder in ~/Library/Mozilla and Phoenix Folder in /Users/your_name/Library/Phoenix).
2- Download the latest nightly build (Firebird icon and version is Firefox 0.8.0+). Find it here: http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/
3- Install, dowload the extensions you need from here: http://extensionroom.mozdev.org/main.php
(or http://texturize.net if you succeed...)
4-Restart Firefox (version 0.8.0+) and disable all the extensions from the extensions pref panel).
5-Download and install the official Firefox release. Go to the extension panel and enable extensions.)
6- Enjoy Firefox with EditCSS or Web Developer extensions as you did with Firebird :-)
Hope this can be useful. (at least dojob might try that)
Btw, it's basically the same instructions as found on Firefox pages for updating from Firebird. I don't know if it works, I thought it was better to reinstall from the scratch but it wasn't!
Jon Hicks said 1551 days ago:
I'm sorry you've had all that hassle. I had the extension installed before I upgraded to FireFox 0.8, although I had been using with the nightly builds.Cleay said 1537 days ago:
Just downloaded firefox and editcss - sounded like a great tool - but firefox is refusing to display some bg images for a site I'm working on (using editcss or otherwise), I had a good search but couldn't find anything on it. Maybe it's me being stupid (it is kinda late here in NZ!), but it works fine in macIE and safari so far:http://www.flashfarm.co.nz/aura/index.html
anyone had any similar experiences, or insight?
Shame, it'd be nice not to have to switch between bbedit and safari a thousand times a day!
Jon Hicks said 1537 days ago:
Cleay - do you not use BBEdits new preview feature? It uses the safari rendering engine...Cleay said 1537 days ago:
No actually I haven't used that John - I'll check it out. I'm still kinda new to the whole css thing, so still streamlining the process. Funny how you can miss some of the workflow features in version updates - I probably still have some outdated methods from ps3 too!I figured out my problem btw - It was late and I was stupid! - seems I tacked a few extra values on the end of a couple of background-image properties and forgot to remove the '-image'.
Safari doesn't mind - firefox does (I'm sure PCIE does too!)...