Getting Started: Plone Theming - Part V

Almost as Simple Diazo Theming

Inheriting from Barceloneta

Here we will use the second of the supposed two main ways to create custom themes:

  1. Inheriting the Barcelonata theme:
    We'll create a new theme called "celtic-lite".
Copying Barceloneta makes your theme heavier and will likely make upgrading more difficult.

The Barceloneta theme provides many assets used by Plone’s utilities that you do not need to duplicate. Additionally new releases of the theme may introduce optimizations or bug fixes. By referencing the Barceloneta rules and styles, instead of copying them, you automatically benefit from any updates to the Barceloneta theme while also keeping your custom theme relatively small.

Inheriting from Barceloneta

  1. Go to the Site Setup control panel > Theming ;
    Barceloneta Theme (active)
  2. This time click "New theme";
  3. Enter "celtic-lite" as the title;
  4. DO NOT check "Immediately enable new theme"; and
  5. Click Create.

This will create three files:

  • index.html
  • manifest.cfg
  • rules.xml

We will need one more

  • celtic-lite.plone.less

Edit manifest.cfg

Open manifest.cfg, and make the following updates:
development-css = ++theme++celtic-lite/celtic-lite.plone.less
production-css = ++theme++celtic-lite/celtic-lite.plone.css

Click Save!


Edit rules.xml

Include the Barceloneta rules:


  1. Open rules.xml; and
  2. add the lines:


    <!-- Import Barceloneta rules -->
    <xi:include href="++theme++barceloneta/rules.xml" />

    line 6
  3. Click Save.

Copy index.html

The new index.html file produced by plone is basically empty.

  1. Go back to the control panel;
  2. "Inspect" the Barceloneta theme and open its index.html;
  3. Select all of the contents, and copy;
  4. Go Back to the control panel; and
  5. Modify the celtic-lite theme;
  6. Open the celtic-lite index.html;
  7. Select all of its content, and paste;
  8. Click Save


Create celtic-lite.plone.less and celtic-lite.plone.css

  1. Click Add new file;
  2. Enter the filename thus:
  3. Click Add;
  4. Into this new Less file enter:
    /* Import Barceloneta styles */
    @import "++theme++barceloneta/less/barceloneta.plone.less";

    /* Customize whatever you want */
  5. Enter whatever other customisations you wish;
  6. Click Save;
  7. Build the Less file by clicking Build CSS > Compile:
    Build CSS
  8. Go back to the control panel and activate the theme;
  9. VOILÁ!


Part: 1 2 3 4 5