This document discusses an alternative theming approach for Plone based on overriding the Barceloneta theme. It involves creating a package with a theme that copies elements from Barceloneta, removes unnecessary parts, and adds static CSS and JS. A key aspect is using the collective.sidebar addon to combine the toolbar and navigation into a sidebar for a more mobile-friendly interface. Code examples and links are provided.

1. Alternative Approach to
Plone Theming
Plone Conference 2018

2. こんにちは
Hello!

3. こんにちは
• Stefan Antonelli
• operun GmbH in Germany
• Twitter @stefanantonelli
• GitHub at santonelli

4. What is this Talk about?

5. What is this Talk about?
• Theming based on Barceloneta
• Overrides to Barceloneta
• Extendable to use resource registry
• Mobile first approach

6. What is this talk not
about?

7. What is this talk not about?
• Best practice in Plone Theming
• plone.restapi
• Volto, React, etc.
• Please don't throw eggs

8. How to archive this?

9. Theme is based on
Barceloneta

11. Make use of existing
elements

12. We drop what we don't
need
Or what we don't want to theme

13. Searchbox

14. Columns

15. Toolbar

16. Header, Footer, drop
whatever you (don't) want

17. We have to create a
package

18. We have to create a package
• Create a package
• Make use of plone.cli, mr.bob, etc.
• Keep everything together in a repo

19. We have to create a
theme

20. We have to create a theme
• Add a regular theme
• Copy default index.html
• Copy rules from Barceloneta
• Do not register any resources

21. Make use of overrides

22. We add one static CSS

23. We add one static CSS
<link rel=“stylesheet"
type="text/css"
href=“++theme++plonetheme.tokyo/css/custom.css"
/>

24. We add one static JS
<script src=“++theme++plonetheme.tokyo/js/custom.js”></script>

25. Tweak rules.xml

26. Tweak rules.xml
<before css:theme="head link[rel=‘stylesheet’]"
css:content="head link" />

27. Rename ID and Classes

28. What is the Result?

31. The good things

32. The good things
• We still have to use Plone
• No Diazo rules
• No resource registry
• No Toolbar

33. The bad things

34. The bad things
• We still have to use Plone
• No modern, straight forward, fancy, wohooo,
frontend framework
• Not sexy

35. Frontend stack to
complex for Plone devs

36. To bundle or not to
bundle?

37. To bundle or not to bundle?
• Create a bundle if you like
• Add LESS and JS as a resource
• Make use of external tools
• Required in some cases

38. Wait, did he say no
Toolbar?

39. Wait, did he say no Toolbar?
• Yes, we try to avoid toolbar
• Bring editing features and navigation together
• Toolbar + Navigation = Sidebar

40. collective.sidebar

41. collective.sidebar
• Bring toolbar and navigation together
• Drop-in replacement for Toolbar
• Mobile first approach
• One viewlet to customize

42. Demo

43. Code
• https://github.com/collective/plonetheme.tokyo
• https://github.com/collective/collective.sidebar

44. Questions?

45. Thank you!
• Stefan Antonelli
• Twitter @stefanantonelli
• GitHub at santonelli
• https://github.com/collective/plonetheme.tokyo
• https://github.com/collective/collective.sidebar