Plone 5 theming

Víctor Fernández de Alba@sneridagh

Plone 5Theming

• Plone Foundation Member

• plone.app.multilingual

• “Barceloneta" default Plone 5 theme

• Team leader of the new plone.org site project

Víctor Fernández de Alba@sneridagh

Oriol Martí@OriolMartiColom

Albert Casado Celma@albertcasado

Deductible LESS

structureand file naming

variables.plone.less

Bootstrap 3 - based

• Based, not dependent in any way

• prepended plone-* whenever possible as long it does not breaks legacy CSS

• Original BS resources included on Plone

Plone legacy classes and IDs• .portlet .portletNews

• .formHelp, .formControls

• .context, .standalone, .destructive

• .documentFirstHeading

• #portal-column-content

• #edit-bar

Changes

plone.mainnavigation viewlet

Fontello icons

New default way of manage collection of icons

Used in Plone bundle and Barceloneta

(http://fontello.com/)

How to use Fontello?Products.CMFPlone > static > fonts

Just load config.json in fontello.comand start hacking/adding your own fonts

Save it and add it to your own theme

Plone Toolbar

• plone.app.layout

• plone.app.contentmenu

• Small changes since last year

• Site control panel setting for change the orientation

Plone Toolbar (II)

<replace css:theme=“#portal-toolbar" css:content-children=“#edit-bar" css:if-not-content=“.ajax_load"

css:if-content=".userrole-authenticated"/>

• Do not forget to make space for the toolbar just after the <body> tag with this rule:

Control Panel

• Use a Fontello (or CSS font-face based solution)

• Add a CSS class with the “normalized” name of your new control panel item like:

.icon-controlpanel-FilterSettings:before { content: '\e844'; }

Easy backend customization

• Reusing Barceloneta resources

• Use the new Barceloneta backend.xml Diazo rules and related CSS

• in the future, use the Plone Intranet theme switcher

Resource Registries

Resource Registries

Resource

Bundle

Overrides

Variables

Pattern options

Resource

• RR basic unit

• A collection of LESS files and JS

• Actually, is more like a web component for Plone

Resource

Bundle

• A collection of RR resources

• Finally, they compile to a single CSS and JS resources in production mode

• Development mode for LESS and JS on the fly

• They can be compiled TTW statically too (ZODB)

Bundle

Overrides

• Easy customization of ++plone++ resources

• Why to stop here? More on that later…

Plone Variables

• TTW plone.less variable customization

Automatic variables

• Available for every RR resource

• Used in compilation

• TTW they resolve to URLs

• in console they resolve to FS path

@import url("@{mockup-patterns-select2}");

No more<div metal:fill-slot=“javascript_head_slot” />

<div metal:fill-slot=“style_slot” />

and welcome to

add_bundle_on_request(self.request, 'thememapper')

add_resource_on_request(self.request, 'jquery.recurrenceinput')

Console script helpers./bin/plone-compile-resources --site-id=myplonesite --

bundle=mybundle

./bin/plone-generate-gruntfile --site-id=myplonesite --bundle=mybundle

Diazo

Diazo

• Pure Diazo theme definition

• Diazo bundles

• New manifest parameters

Pure Diazo

• Remember its original definition

• Easy for a designer to jump in

• Distributed through zip (import/export)

Diazo bundles• They preserve the “pureness” of a Diazo theme

• New manifest attributes

Best Practices

Reuse Barceloneta as far as you want

Optional Barceloneta profile to register Barceloneta resources

<dependency> profile-plonetheme.barceloneta:registerless </dependency>

(metadata.xml)

Reuse Barceloneta as far as you want (II)

@import "@{barceloneta-fonts}";

Use it in your own less files by using the barceloneta-* variables

Dont get obsessed with

• Use the CSS framework you like the most, you are not tied to Bootstrap

• The number of requests your site is doing: HTTP2.0 is almost here

Don’t be tempted by the dark side

Skins layers are not allowed

Use plone.resource instead

For overriding use z3c.jbot

CSS frameworks

.context:extend(.btn-primary) { }

Use the “extend” feature

Adapt the grid via Diazo

Or via a custom transform (like Mosaic does)

Do not create the theme from scratch

• Use the bobtemplates.plone templates

• Use the default Plone’s HTML before Diazo it, now the Plone markup is modern, updated and accessible

• Understand Plone structure and distribution of elements and reuse it

• Copy/Reuse Barceloneta LESS and adapt it

TinyMCE

• Custom generated stylesheets

• New Diazo Tiny content specific CSS

• Tiny content templates now in core!

Nginx passthrough(for static plone.resources

++something++)

location ~ .*?/\+\+components\+\+root/(.*) { alias /path/to/my/package/$1;

}

You can even combine it with collective.recipe.omelette for total convenience ;)

Useful tools

• Chrome reloader Eric Bréhault’s button

• ?diazo.off=1

• ?diazo.debug=1

• @@test_rendering

Not onlyPlone is back

TTW is back!(for good! and with vengeance too!)

Change Logo

Toolbar logo (really?)

plone.app.theming has more power than ever before

Plone customizations TTW• They rock, like never before

• TTW is an opportunity to attract new people

• Plone must have a zero effort story for easy and quick customization

• Now it’s even possible to do complex things TTW

• Let’s make a theming and customization learning curve really low steep

• Objective: attract non technical people to try Plone

DEMO!!!

collective.jbot• It covers gaps in the current Plone

customization scenario stories

• Should work on Plone 5 soon (anyone?)

• Should discuss the inclusion in the core

• Overcome some security issues

Thoughts for the future• What will happen when skins will be

gone?

• It would be nice to have a way to override ++mynamespace++ like RR already does for ++plone++ resources (Overrides tab)

• pat-filemanager

• Mosaic already does something similar with ++layout++ resources

ThanksVíctor Fernández de Alba

@sneridagh

Software

Plone 5 theming