Creating a theme for Plone from scratch was never that easy! The talk shows how to create simple but beautiful themes for Plone's Classic UI with different use cases in mind.

1. Beautiful Plone
Theming by use case for Classic UI

2. Bonjour
Good morning

3. Bonjour
• Stefan Antonelli
• Works for operun
• Twitter @stefanantonelli
• GitHub at santonelli

4. What is this talk about?

5. What is this talk about?
• Beautiful Plone 6
• Classic UI
• Theming by use-case

6. I’m sad. I’m really sad.

7. Themes for Plone 6

8. Stay tuned

9. Good News, Everyone!

10. Theming is fun again

11. Bootstrap

12. Build process

13. Bootstrap Variables

14. Bootstrap Variables
• Basic behaviour like rounded corners
• Fonts, Colors, Shadows
• https://github.com/twbs/bootstrap/blob/main/scss/
_variables.scss

16. Showcase

17. Bootstrap Components

18. https://getbootstrap.com/
docs/5.2/components

29. https://getbootstrap.com/
docs/5.2/examples/

30. Cards

44. plonetheme.tokyo

45. plonetheme.tokyo
• Everything is Bootstrap
• No Columns
• No Portlets
• Responsive (really)

51. https://github.com/
collective/plonetheme.tokyo

52. plonetheme.munich

53. plonetheme.munich
• Everything is Bootstrap
• Two Columns
• Portlets aside Content
• Close to Bootstrap Version of a Theme

59. https://github.com/collective/
plonetheme.munich

60. Toolbar

61. What about Toolbar?
• I’ll use collective.sidebar
• Bring editing features and navigation together
• Toolbar + Navigation is new feature called Sidebar

62. collective.sidebar

66. collective.sidebar
• Bring toolbar and navigation together
• Drop-in replacement for Plone’s toolbar
• One template to customize
• https://github.com/collective/collective.sidebar

69. Touch the Templates

70. Cleanup

71. Use Bootstrap

72. Questions?

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