Plone 3 Themes
Changing CSS
There is (potentially) a three stage commit at work here:
- Firebug twiddling
- Custom CSS changes in Plone
- Changes to the filesystem theme (based on the Custom CSS changes above)
Firebug
I mostly used Firebug to see what effect a CSS change has had. Occasionally I'll make an edit to the Firebug CSS pane but mostly it's a case of rolling over various HTML elements, seeing where CSS is being applied and what effects it is having.
Popups can be a pain to examine through Firebug but it's possible.
Custom CSS Changes in Plone
This is where the main CSS editing is done/discovered.
Broadly:
- Firebug let's you see where the CSS change should be applied
- You create/edit the custom CSS page
- hit refresh!
You'll find yourself with at least two browser tabs open on your website: one on the page you want to change the CSS for; one on the customized CSS; and possibly a third open on Site Setup; Themes to swap themes when you're restarting Plone.
First Time Changes
The first time you're making changes to stylesheets you'll have nothing to go on so you're (probably) going to be copying from the Plone default stylesheets.
Go to Site Setup; ZMI; portal_skins; plone_styles and click the stylesheet that Firebug has suggested.
Click customize and start editing! Click Save Changes and view the effects in the other tab (obviously you'll have to hit refresh for Plone to resupply your browser with your changed stylesheet!).
Later Changes
Once you have updated your filesystem theme's stylesheet and have got Plone using it then you'lll want to customize your theme's stylesheet (and not Plone default's!).
Go to Site Setup; ZMI; portal_skins; plonetheme_mytheme_styles and click the stylesheet that Firebug has suggested.
Click customize and start editing as before.
Change the Filesystem Theme
When you're happy with your customized CSS you need to cut'n'paste it back into your filesystem theme.
There's a tiny subtlety here in that the in-Plone stylesheets are called foo.css whereas the in-filesystem stylesheets are called foo.css.dtml. The difference is unclear and all documentation suggests that DTML is going to be deprecated. But it isn't, yet.
Now you'll have to update Plone with your changes.
Warning
Remember to remove your customized stylesheet(s) from Plone! Otherwise you won't see it you've successfully transported your changes.
Go to Site Setup; ZMI; postal_skins; custom and select your customized stylesheets and delete them!
Document Actions