Getting Started: Plone Theming - Part III

Simple Diazo Theming 
Here we will start with some simple theming activity, using the first of the supposed two main ways to create custom themes:

  1. Copying the Barceloneta theme:
    We'll create a new theme called "celtic"; and

Plone uses the Diazo theming engine to make theming of Plone sites easier. More info about Diazo can be found here... (and about plone.app.theming here ...)
TODO: Whats this plone.app.theming thing about?

Copying and changing Barceloneta

  1. Go to the Site Setup control panel > Theming ;
    Barceloneta Theme (active)
  2. Click Copy;
  3. Enter "celtic" as the Title:
    I've found it less probalematic if you use this title consistantly throughout when naming and referencing objects. Enter the title in with all lower case and/or with dashes in the title, no whitespace.
  4. Check Immediately enable new theme
  5. Click Create, and there it is:
    Celtic theme
  6. If things start going awry, enter the URL:
    http://your.site:port/@@theming-controlpanel
    into a new browser tab. From here you will be able to switch back to the Barceloneta Theme.
    Try it now.

Anatomy of a Diazo theme

Spend some time looking at the most important files:

manifest.cfg :
contains the metadata about the theme;
(see the manifest reference);
rules.xml :
contains the theme rules;
(rules reference);
index.html :
the static HTML of the theme.

<body> CSS classes

As you browse a Plone site, Plone adds rich information about your current context. This information is represented as special classes in the <body> element. Information represented by the <body> classes includes:

  • the current user role, and permissions,
  • the current content-type and its template,
  • the site section and sub section,
  • the current subsite (if any),
  • whether this is a frontend view,
  • whether icons are enabled.

<body> classes for an anonymous visitor

Below you can see an example of the body classes for a page named “front-page”, located in the root of a typical Plone site called “acme”:

<body class="template-document_view
             portaltype-document
             site-acme
             section-front-page
             icons-on
             thumbs-on
             frontend
             viewpermission-view
             userrole-anonymous">

<body> classes for a manager

And here is what the classes for the same page look like when viewed by a manager that has logged in:

<body class="template-document_view
             portaltype-document
             site-acme
             section-front-page
             icons-on
             thumbs-on
             frontend
             viewpermission-view
             userrole-member
             userrole-manager
             userrole-authenticated
             plone-toolbar-left
             plone-toolbar-expanded
             plone-toolbar-left-expanded">


Notice the addition of userrole-manager.

Conditionally showing content

Lets only show the breadcrumbs for authenticated users

  1. Open rules.xml
  2. find this line
    <replace css:content="#viewlet-above-content" css:theme="#above-content" />
    This rule states that the element that comes from the content (Plone) with the id #viewlet-above-content must replace the element with the id #above-content in the static theme.The class we are looking for is userrole-authenticated.
  3. Add further properties to this rule:
    <!-- conditional breadcrumb, only available to authenticated users -->
    <replace
        css:if-content="body.userrole-authenticated"
        css:content="#viewlet-above-content"
        css:theme="#above-content" />
  4. Don't forget to Click Save!
  5. Test it out by traversing site as both an anonymous and authenticated user.

Customising CSS

  1. Open the main Less file: less/barceloneta.plone.less;
  2. Let's add an additional Less file to hold our celtic customisations by clicking "Add new file":
    Add new Less file
  3. Click Add;
  4. Enter some customisations for the body style:
    body styles
  5. Click Save (and yes its in bold 'coz I've forgotten to do it soo many times and then scratched my head for 15 minutes when there is no change to rendered page!);
  6. Add an import directive to the main Less file barceloneta.plone.less;
    import celtic.plone.less
  7. Click Save
  8. Then build a new main CSS file -  this is the file declared in the manifest, Click "Build CSS";
    Build CSS
  9. Wait for it to finish;
  10. Reload the page in your browser;
  11. done!

 

Part: 1 2 3 4 5