Plone 5 theming
Transcript of Plone 5 theming
• 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
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.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
• RR basic unit
• A collection of LESS files 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 fly
• They can be compiled TTW statically too (ZODB)
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
Pure Diazo
• Remember its original definition
• Easy for a designer to jump in
• Distributed through zip (import/export)
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
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-filemanager
• Mosaic already does something similar with ++layout++ resources