Creating a Diazo-based theme as a Plone add-on, allowing you to manage your code in a repository.

Instructor: Thomas Massmann, Rob Porter

Length: 1 day

Target Level: Intermediate

Target Audience: Integrator, Developer

  • Documentation: https://training.plone.org/5/theming/index.html
  • What you will learn: Sleuthing (how to find out what you need to customize), creating custom views for content types and listings, overriding existing Plone elements (logo, footer, search etc.), and CSS based content assignment. Specific topics include:
    • Theme basics, plone.app.theming and manifest, bobtemplates.plone
    • Customizing CSS from Barceloneta in the file system
    • Build your own theme in the filesystem with just CSS, HTML, Javascript and Diazo
    • Take advantage of LESS, different ways to build LESS (just compiling or using Grunt/Gulp)
    • Reusing LESS files from Barceloneta (parallel checkout of Barceloneta Theme and LESS-includes)
    • Overriding a Plone template
  • Prerequisites: Basic Plone and CSS/HTML knowledge.
  • Things to bring: A laptop with code editor of your choice.

Preparation

Please make sure that you are able to install and use npm, grunt-cli, mr.bob and bobtemplates.plone as described here: https://training.plone.org/5/theming/theme-package.html#preparing-your-setup

Also please create a test Theme package with mr.bob as described here: https://training.plone.org/5/theming/theme-package.html#install-mr-bob-and-bobtemplates-plone and bootstrap and run the buildout of this package, to make sure that everything is working.