Using Firebug to edit plone's css

Basically use FireBug's (https://addons.mozilla.org/firefox/1843/) Inspect feature and live css and html editing and turn portal_css debug mode on.

1. Firstly install firebug by opening firefox and then going to https://addons.mozilla.org/firefox/1843/
2. Login to the ZMI on your plone site and browse to the portal_css registry, check the debug mode and click save changes. This will mean that all the css files are linked/imported individually in your plone.
3. Browse to the page you wish you restyle.
4. Click the firebug button in the bottom right of your browser.
5. Enable Firebug if it isn't already.
6. Click the Inspect button/tab in the top left of the firebug panel.
7. Move your mouse to the element on the page you wish you change it should get a red/blue box around it. Click you mouse button.
8. The HTML and CSS for that element will be shown in the fire bug panel. Including the filename and line number for the css file.
9. You can edit the CSS (and HTML if you need to but try to minimise this) live until the element looks the way you want. Then you can make the cooresponding changes to the actual template file (copy the template to your product folder and/or custom folder in portal_skins).
10. Test in IE and other non Firefox browsers to be sure it works cross browser.