Personal tools
You are here: Home Documentation Tutorials Using the Resource Registries to control CSS and Javascript Overview and example walkthrough
Support

Get Help

Join our chat rooms or support forums if you have more specific questions.

Plone Training
Learn how to design, build, and deploy a website in Plone through one of the numerous Plone training sessions around the world.
Find Plone training…
 
Document Actions

Overview and example walkthrough

Basic operations of the CSS-and Javascript-registries – and a truly minimal example of how to use them in real life

elvix

Plone has two neat tools for managing Cascading Stylesheets and Javascript in a handy way. This tutorial explains some whys and hows and even has a minimal practical example of how it works.
Page 2 of 5.

The registries are two tool that live only in the ZMI. They have no interface in the Plone portal UI itself.
they are called portal_css and portal_javascript. You can easily find them when browsing the ZMI of your Plone site.

css registry in the ZMI

Once selected, the css-registry ( the one we use for this example. The javascript one is almost exactly the same) will present an interface displaying all the registered resources ( in the case of the CSS-registry, the resources are CSS-files)

CSS-registry main UIEach entry in the registries has an id that references a resource that can be found in the current Plone acquisition context. This normally means that the corresponding object should live in portal_skins like custom templates and most customisation-stuff do in Plone. Whether it exists somewhere like portal_skins/custom or in your own filesystem product makes no difference. Technically it could be a tool or a utility or anything that has a name and is avaialable, but most commonly it will be a File object ( for static CSS and JS) or a DTML Method (for dynamic variable replacement). The Resource Registries makes no difference as to what the object is, as long as it can be found and called, rendered or printed as a string.

So to use one of the registries, you have to

  1. Have a resource (for example a File) in the current context ( for example portal_skins/custom) with some CSS or Javascript in it
  2. Make an entry in the corresponding registry (for example portal_css) with the id of the resource.

Example walkthrough of adding a CSS resource

As a simple example of how the most basic functionality, we'll add and register a minimal stylesheet that adds to the background of your Plone a terrible red color.
  1. in your ZMI, navigate to portal_skins/custom
  2. from the add-item menu, select File
  3. Give the new File an id of 'css-demo.css'
  4. paste the following content into the file:
    body{ background-color : red }

    …and save it

  5. Now you have your resource. Now we just have to link it from the Plone site to make the style apply:
    in your ZMI, navigate to the CSS-Registries: portal_css

  6. scroll to the bottom of the form, where there is a form for adding a stylesheet

  7. in the id field, enter 'css-demo.css'  (Leave the other values as they are by default for now)

Voila! – view your Plone site and you'll easily notice its (admittedly quite horrifying) shiny red background color!

 
by elvix — last modified December 30, 2006 - 23:55 All content is copyright Plone Foundation and the individual contributors.

For any issues with the web site functionality, please file a ticket.

Please consult the policy on plone.org content if you want your content published on this site.

Servers and hosting by