Theming by use case for Classic UI

Theming by use case for Classic UI. Creating a theme for Plone from scratch was never that easy! The talk shows how to create simple but beautiful themes for Plone's Classic UI with different use cases in mind.

 I am sad, I wanted to stand here with a few shiny new themes for the conference. But I got a cold and it did not work out. Some will come though.

The good news: theming is fun again. The markup of Plone 6 Classic UI is Bootstrap 5. You can create beautiful things in minutes by simply using specific classes, copying some examples from Bootstrap. I will show screen shots, and especially check out the ones with forms: they have no styles, they just like fine already. If you need javascript, the story is much simpler. If you only need jQuery, it is there already.

You can check the training documentation to see how theming works, in various ways depending on your use case. Spoiler: it is easy.

We use Bootstrap variables. There is basic behaviour like rounded corners. You may just need five lines to end up with a very different look and feel. You can base your theme on the default Plone theme called Barceloneta, or you can simply start from scratch. Copy an example and you are done. In most cases you can copy the code also in the TinyMCE editor and it will work. You might need to allow a few more attributes in the html filter, which is there for security.

You can use all Bootstrap icons.

Example theme: plonetheme.tokyo. Example site and code. This is for Plone 5.2. I had no time to update it to Plone 6 yet, but it is mostly deleting code. Let me know what changes you would like to see.

Another example, plonetheme.munich. Two columns, portlets aside from the content. I do not recommend to use this in a project, or extend this. But look at it as an example of how you can have a minimalistic approach of what is necessary.

I do not like the default toolbar much. I have created collective.sidebar instead. Bring toolbar and navigation together.

Main take away: create a minimal theme, adjust some templates, it is fine to change the main template, cleanup, be lazy and use Bootstrap.