Mastering Plone Theming on Day 2 of Plone Conf 2017

Mastering Plone Theming training showed me how to further adjust layouts and design and gave me insight on improving the Plone Theme Editor
Mastering Plone Theming on Day 2 of Plone Conf 2017

After an invigorating experience learning about Guillotina on day 1 of Plone Conference. I was looking towards Day 2 to gain some insight about working with Plone and other related systems. Like the previous day, there were a number of training sessions to attend, which varies from:

Frankly, Advanced Python and Building Angular 4 apps using the Plone REST API were the two most interesting training sessions to me. The end decision was to attend the Mastering Plone Theming session to gain some insight to improve the Plone Theme Editor.

Customizing Themes Through the Web

The first part of the training was basic customization of themes and layouts TTW (through the web). I relearned how to:

  • change the logo of the site by visiting http://localhost:8080/@@site-controlpanel
  • enable development mode to allow Less and JavaScript files to be compiled and bundled on the go by visiting http:/localhost:8080/@@resourceregistry-controlpanel
  • create new themes by copying or inheriting from an existing theme. Frankly, theme inheritance is a bit new to me. However, the trainers did mention that the index.html file cannot be imported or inherited. It must be manually copied from the inherited theme.
  • customize themes using diazo rules. Diazo rules allow the layout and content of themes to be modified and replaced based on inline markup found in a rules file. See Diazo documentation for more details.
  • create a visitor-only theme, otherwise known as a conditional theme.To achieve this you will need to associate your visitor theme rules with an expression like css:if-content="body.userrole-anonymous". For rules that will affect logged-in users you can use the expression css:if-content="body:not(.userrole-anonymous)".

Creating a theme package

The second part of the training dealt with creating a theme package on the filesystem. This required us to install Node, NPM, Grunt,  Virtualenv and Mr.Bob. The training guide on preparing your setup will give you a step by step approach with all you need to get started on Ubuntu or Debian.

Additional installation step on Ubuntu 16.04

For me, I was using Ubuntu 16.04. I had to variegate from the setup guide due to the fact my system was reporting that the grunt was not installed even though it was.

grunt error

This was due to the fact that my installation path for NPM libraries wasn’t in my environment. I wrote a previous blog post on how to resolve this issue.

If you need help setting up on your system, you can leave a comment on this post and I will send you the instruction on how to get started.

Building a new plone instance via the Plone theme package

After I resolved the grunt issue, I went back on track with the training guide by doing the following tasks:

  • creating a virtual environment for Python and installing mr.bob
    1. virtualenv mrbobvenv
    2. . mrbobvenv/bin/activate
    3. (mrbobvenv): pip install mr.bob
  • creating a theme package using mr.bob template
    1. (mrbobvenv): pip install bobtemplates.plone==2.0
    2. (mrbobvenv): mrbob -O ploneconf.theme bobtemplates:plone_theme_package

install zc.buildout and bootstrap your development environment for Plone

  1. (mrbobvenv): deactivate
  2. virtualenv buildoutvenv
  3. source buildoutvenv/bin/activate
  4. (buildoutvenv): cd ploneconf.theme
  5. (buildoutvenv): pip install -r requirements.txt
  6. (buildoutvenv): buildout bootstrap
  7. (buildoutvenv): ./bin/buildout
  8. (buildoutvenv): deactivate

Notice that we used the package to create a brand new Plone buildout. Therefore, we can run the following command inside the package directory to start a new plone instance.

  1. bin/buildout
Customizations

Afterwards, we downloaded a bootstrap theme and added rules to the rules.xml file to map the content of Plone to the downloaded theme. Just like that, we built a new Plone theme. In addition, we added back the Plone toolbar, breadcrumbs, top navigation links and made the backend of Plone unthemed.

We also played around overriding templates from another theme and touched a bit of advance diazo rules. See the Diazo documentation for more useful tricks and features.

Resource Registry

Demystifying the resource registry was an interesting part of the training. In fact, there was a talk on Resource Registry Demystified by Johannes Raggam, which I didn’t go but heard it was very intriguing. Just saying, I was at the Getting Paid Without Get Paid talk by Sally Kleinfeldt at the time.

We didn’t need to use the resource registry. However, the resource registry plays an important role in bundling static files.

Frankly, the resource registry is a topic I’m not familiar with. I’ve used it to add, bundle, compile and override static files, but I haven’t done anything advance with it. In this training, we touched on the basic, which includes preparing the resource registry for the uninstallation of a resource package.

Portlets customizations

The training ended with advance diazo rules and override portlets. Like Diazo, portlets are another topic, which I’m not familiar with, but used in a project. Portlets are editable boxes in the left and right sidebar of Plone sites that could come handy based on the type of site you wish to run. For more information on portlets, see the portlets documentation on plone.org.

Learning outcomes

With any training session, there’s always something new or that piece of the cake you didn’t get previously. For me, there were some tricks and trades, which I learned during the session are:

  • Enhanced diazo rules for overwriting an entire page element with XSLT. XSLT stands for eXtensible Stylesheet Language Transformation. It is used for transforming the final output into other formats. Chrissy Wainwright from Six Feet Up did a nice example of using XSLT in Diazo, which I recommend you to read.
  • Use ?diazo.off=1 to view unthemed version of Plone.

The training was quite informative and will get you up to speed on theming in Plone. However, my attention was not directed at the training but seeing others work with the Plone Theme Editor. My 5 big takeaways from this training in relations to my aim were:

  • the improvements I’ve made during Google Summer of Code is a need
  • inheriting themes can be made simpler by having a mechanism to import files from the parent theme via the theme editor.
  • inline file reference and suggestion will make it easier for users to extend rules and linking files
  • a theme store is needed
  • onsite documentation and help is needed in the theme editor

This completes the 2 days training at the Plone Conference 2017. In the next 3 days, from October 18 to 20, I’ll cover the Plone conference talks that I’ll attend.

Go Back
Menu
×