Changes your workflow
Edit in FireBug
Use FireBug to live edit and pixel push until satisfied
While editing, let cssUpdater store your changes
Sync all or selected changes to your css files with one click
Reload your site
... and smile, since all your changes are saved
* Install FireBug
* Install cssUpdater Firefox add on
* Install cssUpdater Desktop application
* Type in the code found on your memberpage
* Verify that you have a cssUpdater tab in FireBug
* Verify that you don't get any connection error when starting up the cssUpdater desktop application
* Verify that "Test connection" in the cssUpdater FireBug tab don't give any errors
* Add a css file in the files area in the cssUpdater desktop application
* Verify that you include the same css file in your html page
* Edit some css classes via FireBug within you html page
* Verify that the same changes is showing up in cssUpdater desktop application
* Hit the sync button
* Verify that your changes is preserved by reloading your html page or check your css file
Prerequisites: Adobe Air, Firefox and minumum FireBug
To be able to use cssUpdater, you need to download the Firefox extension below: Install FireBug first if you don't have it.
FireFox extension (opens in new window)
Then click on the INSTALL NOW badge below to install the desktop application. Or download the installer manually here.
Installation / Configuration
After a successfull installation of the extension and starting cssUpdater, all you need to do is to go to your member page to find your serial key.
Download my examples to your desktop to try it out:
Example.css (Right click and choose save as... )
cssUpdater-test.html ( ... save as again)
Start up the monster!
Run your Desktop program, drag your css files from your desktop or whatever to the droparea in the application, then start edit in FireBug!
Your changes are stacked up in cssUpdater, use the buttons in the FireFox add on or in the desktop application to control your sync.
IMPORTANT! If you don't see any changes in the upper list in cssUpdater you should click on "Test connection" in the FireBug extension.
If you are missing the cssUpdater tab in FireBug after upgrading FireFox you need to first be sure that FireBug is installed correctly. Then REINSTALL cssUpdater extension, so you need to uninstall the extension and then install it again. Don't know the cause of this yet, but at least a reinstall fixes the problem.
cssUpdater does not support substituting of a css property. So if you have a existing property height:100px; and changes it to min-height:100px; the first height:100px; will still be in the css file. The correct way to do this is to first disable height:100px; (in FireBug) and make a new property in FireBug with min-height:100px;
Got stuck? Here is some installation screenshots to help you out
Look for the new tab in FireBug called cssUpdater in which you can see information about your connection and any problems.
After adding the cssUpdater.css to the bottom file area
Now you can try edit some css in FireBug again, this a screenshot after changing some properties in the example above
When satisfied, you can hit the "Sync now" found in FireBug CSS, Html and cssUpdater panel or in the application to save your changes.