Plone 5 theming

Publish in



Please download to get full document.

View again

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

    Previous Document

    Democracy- Lesson 2

    We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks