Classic UI theming from scratch
Contents
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 Boostrap (as basis)
Templates#
Add
z3c.jbot
overridesCopy templates to customize
Add custom views for your story
Available themes#
plonetheme.tokyo
(mobile first, one column)plonetheme.munich
(minimalistic)