Plone 5 theming
•
2 likes•1,784 views
This presentation was given at the Bucharest Plone Conference on 15/10/2015.
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
Recently uploaded
Recently uploaded (20)
Plone 5 theming
- 1. Víctor Fernández de Alba @sneridagh Plone 5 Theming
- 2. • 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
- 4. Oriol Martí @OriolMartiColom Albert Casado Celma @albertcasado
- 5. Deductible LESS structure and file naming
- 7. 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
- 8. Plone legacy classes and IDs • .portlet .portletNews • .formHelp, .formControls • .context, .standalone, .destructive • .documentFirstHeading • #portal-column-content • #edit-bar
- 9. Changes
- 11. Fontello icons New default way of manage collection of icons Used in Plone bundle and Barceloneta (http://fontello.com/)
- 12. 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
- 13. Plone Toolbar • plone.app.layout • plone.app.contentmenu • Small changes since last year • Site control panel setting for change the orientation
- 14. 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:
- 15. 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'; }
- 16. 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
- 19. Resource • RR basic unit • A collection of LESS files and JS • Actually, is more like a web component for Plone
- 20. Resource
- 21. 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)
- 22. Bundle
- 23. Overrides • Easy customization of ++plone++ resources • Why to stop here? More on that later…
- 24. Plone Variables • TTW plone.less variable customization
- 25. 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}");
- 26. 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')
- 27. Console script helpers ./bin/plone-compile-resources --site-id=myplonesite -- bundle=mybundle ./bin/plone-generate-gruntfile --site-id=myplonesite -- bundle=mybundle
- 28. Diazo
- 29. Diazo • Pure Diazo theme definition • Diazo bundles • New manifest parameters
- 30. Pure Diazo • Remember its original definition • Easy for a designer to jump in • Distributed through zip (import/export)
- 31. Diazo bundles • They preserve the “pureness” of a Diazo theme • New manifest attributes
- 32. Best Practices
- 33. Reuse Barceloneta as far as you want Optional Barceloneta profile to register Barceloneta resources <dependency> profile-plonetheme.barceloneta:registerless </dependency> (metadata.xml)
- 34. Reuse Barceloneta as far as you want (II) @import "@{barceloneta-fonts}"; Use it in your own less files by using the barceloneta-* variables
- 35. 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
- 36. Don’t be tempted by the dark side Skins layers are not allowed Use plone.resource instead For overriding use z3c.jbot
- 37. CSS frameworks .context:extend(.btn-primary) { } Use the “extend” feature Adapt the grid via Diazo Or via a custom transform (like Mosaic does)
- 38. 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
- 39. TinyMCE • Custom generated stylesheets • New Diazo Tiny content specific CSS • Tiny content templates now in core!
- 40. 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 ;)
- 41. Useful tools • Chrome reloader Eric Bréhault’s button • ?diazo.off=1 • ?diazo.debug=1 • @@test_rendering
- 42. Not only Plone is back
- 43. TTW is back! (for good! and with vengeance too!) Change Logo Toolbar logo (really?) plone.app.theming has more power than ever before
- 44. 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
- 45. DEMO!!!
- 46. 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
- 47. 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
- 48. Thanks Víctor Fernández de Alba @sneridagh