How to Make Your CSS Changes Take Effect Instantly

by Anne Bowtell — last modified Dec 26, 2009 02:28 PM

How to ensure that any CSS changes you make can be seen instantly. This is the most common problem themers run into when they are new to Plone.

Enabling development mode

Before beginning any CSS customization you should turn on debug-/development mode. This will guarantee that caching and compression of CSS is disabled. This will also ensure that you can see your changes in real time, after refreshing your browser.

Here is how you enable debug-/development mode:

  1. log on to your Plone site as the 'admin' user
  2. add '/manage' to the URL to access the ZMI
  3. navigate to ZMI > portal_css

In Plone 3:

  1. click the Debug/development mode checkbox
  2. click the "Save" button

In Plone 4:

  1. make sure the Development mode checkbox is clicked - if you've started your Zope instance in development mode then this will automatically be checked
  2. click the "Save" button

When you are finished making your CSS modifications you should disable debug-/development mode as it does impact the performance of your Plone site.

Left arrow Previous: Firefox/mozilla UI development tools Next: Change the Font Colours Right arrow