Plone 5 theming

Víctor Fernández de Alba

@sneridagh
Plone 5

Theming

• Plone Foundation Member
• plone.app.multilingual
• “Barceloneta" default Plone 5 theme
• Team leader of the new plone.org site project
@sneridagh

Oriol Martí
@OriolMartiColom
Albert Casado Celma
@albertcasado

Deductible

LESS

structure

and ﬁle naming

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

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.com

and 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
Bundle
Overrides
Variables
Pattern options

Resource
• RR basic unit
• A collection of LESS ﬁles and JS
• Actually, is more like a web component for Plone

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 ﬂy
• They can be compiled TTW statically too (ZODB)

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-gruntﬁle --site-id=myplonesite --
bundle=mybundle

Diazo
• Pure Diazo theme deﬁnition
• Diazo bundles
• New manifest parameters

Pure Diazo
• Remember its original deﬁnition
• 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

Reuse Barceloneta as far as
you want
Optional Barceloneta proﬁle
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 ﬁles
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 speciﬁc 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

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

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-ﬁlemanager
• Mosaic already does something similar
with ++layout++ resources

Thanks

@sneridagh

Plone 5 theming

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Plone 5 theming

Similar to Plone 5 theming (20)

More from sneridagh

More from sneridagh (6)

Recently uploaded

Recently uploaded (20)

Plone 5 theming