Classic UI theming from scratch#

Todo

This page is only an outline and needs a lot of work. See https://github.com/plone/documentation/issues/1286

Theming based on a filesystem package without any dependency.

  • Theming for Plone 6 Classic UI

  • Theme stored in a filesystem package

  • Built from scratch

  • No dependencies to Barceloneta

  • No Diazo needed

Theme package#

  • Create a theme package as explained here.

  • Remove what you do not need

  • Overrides

  • Static files

Static files#

Register directory to keep static files

File: src/plonetheme/munich/browser/configure.zcml Directory: src/plonetheme/munich/browser/static

<!-- Publish static files -->
<plone:static
    name="plonetheme.munich"
    type="plone"
    directory="static"
    />

Theme#

Manifest#

  • Manifest for your theme

  • Keep rules empty to disable Diazo

[theme]
title = Munich Theme
description = A modernized Plone 6 theme
preview = preview.png
rules =
prefix = /++theme++plonetheme.munich
doctype = <!DOCTYPE html>

Bundle registration#

<?xml version="1.0"?>
<registry
    xmlns:i18n="http://xml.zope.org/namespaces/i18n"
    i18n:domain="plonetheme.munich">

  <records interface="Products.CMFPlone.interfaces.IBundleRegistry" prefix="plone.bundles/munich">
    <value key="jscompilation">++theme++munich/js/munich.min.js</value>
    <value key="csscompilation">++theme++munich/css/munich.min.css</value>
    <value key="enabled">True</value>
    <value key="compile">False</value>
    <value key="last_compilation">2020-12-06 12:00:00</value>
  </records>

</registry>

Theme registration#

Register your theme via theme.xml

<?xml version="1.0" encoding="UTF-8"?>
<theme>
  <name>munich</name>
  <enabled>true</enabled>
</theme>

Compile the bundle#

  • Compile SASS to SCSS

Install all requirements and dependencies from package.json:

yarn install

Build the actual bundle:

yarn dist

Theming#

  • Make use of Bootstrap variables

  • Tweak basic settings like rounded corners, shadows, and so on.

  • Set custom fonts

  • Define your own stuff

  • Import Bootstrap (as basis)

Minimal backend styling#

When you create a theme from scratch, it is convenient to reuse the Barceloneta theme for:

  • Plone toolbar

  • add and edit forms

  • control panels

To do so, follow this guide.

  • Create a new CSS file in your theme, such as the following.

    @import "@plone/plonetheme-barceloneta-base/scss/variables.colors.plone";
@import "@plone/plonetheme-barceloneta-base/scss/variables.colors.dark.plone";
@import "@plone/plonetheme-barceloneta-base/scss/root_variables";
@import "bootstrap/scss/bootstrap";

@import "@plone/plonetheme-barceloneta-base/scss/toolbar";
@import "@plone/plonetheme-barceloneta-base/scss/controlpanels";
@import "@plone/plonetheme-barceloneta-base/scss/forms";

    Tip

    See all the available Barceloneta SCSS files, and import the ones that you want to use.

  • Add @plone/plonetheme-barceloneta-base as a dependency.

    yarn add @plone/plonetheme-barceloneta-base

  • Add a script in package.json to compile the CSS.

      "css-compile-main": "sass --load-path=node_modules --style expanded --source-map --embed-sources --no-error-css plone.scss:../static/plone.css"

    Tip

    Look at plonetheme.barcelonta's package.json for a few more scripts that can prefix and minify your CSS and get a bundle for use in production.

  • Run the compilation.

    yarn run css-compile-main

  • Finally, register the bundle.

With this guide, you will save yourself quite some work on styling the toolbar, the add and edit forms, and control panels, while keeping the rest of your theming separate.

Templates#

  • Add z3c.jbot overrides

  • Copy templates to customize

  • Add custom views for your story

Available themes#