Advanced Plone Theming settings add-on

Plone Support Theming
1

Hi,

over the past months I was working on some upgrades for existing diazo themes for a customer. The themes for this customer are customizable (different options for color, header, ...), and we used theme parameters defined in a theme's manifest file. This approach works if only experienced themers/developers are changing the settings, since it can break a theme as soon as a required param is missing or just has a typo.

But the customer uses the themes for a shared Plone hosting environment, which means (end) users without any technical skills can/should change the appearance of an existing theme (no theme customization, just changing a setting to have a different layout/color scheme).

So we came up with an idea to store the settings in HTML snippets in the content, and writing Diazo rules based on the existence of those snippets. This works really great, since you can't break a theme.

For the configuration we created a controlpanel view which sets plone.registry based values, and a viewlet injects the generated HTML into the Plone site which then can be used to create the required layout.

Now the fun part: using collective.themesitesetup we were able to have those called "fat themes" which register their own options for different headers, footers or colors, and the user is able to choose theme specific options - even when uploaded as a zip file.

spirit.plone.theming is released on PyPI and documentation can be found here: http://spiritplonetheming.readthedocs.io/en/latest/.

An overview of all currently available options can be found here: http://spiritplonetheming.readthedocs.io/en/latest/configuration.html#plone-theming-settings, and example diazo snippets are documented here: http://spiritplonetheming.readthedocs.io/en/latest/diazo.html

Currently there is no public theme available which uses this add-on, but I'll try to create one which is free to use (if someone has an idea for a good one, let me know).

What do you think which more options could be added? The latest release adds the ability to add a custom favicon using the control panel (just like the site logo in Plone 5 can be customized).

Any feedback is welcome :slight_smile:

Thomas

Edit: I forgot to mention this add-on works with both Plone 4 and Plone 5.

4 Likes
2

+1 for custom favicon with control panel :slight_smile:

1 Like
3

Does anybody know a good solution for social links? No "like" functionality, just plain links with some more metadata (icon, css class, ...) to build something like this: https://htmlstream.com/preview/unify-v1.9.7/feature_footer_v1.html#footer-v1?

4

I've used these to get simple lightweight share links https://github.com/bradvin/social-share-urls/blob/master/README.md

5

A little off topic, but maybe of interest anyway:

https://github.com/espenmn/medialog.bergensiana/blob/master/medialog/bergensiana/theme/fragments/socialtop.pt

  • Syntax for themefragments is:
    <replace css:theme="#socialtop" css:content="#socialtop" href="/@@theme-fragment/socialtop" />
6

Thats good to know! But we end up having the same "problems" that the theme will break once a user removed one of those params (accidentally) from the advanced settings. So instead of having custom options for every theme we register options for the available spirit.plone.theming categories. A UI with a dropdown select option is, from our experiences, much better. Your theme, for example, could register 6 available layouts ('a', 'b', 'm', 'f', 'x', 's').

Thats exactly the same I was already thinking of :smiley: .

7

[quote="tmassman, post:6, topic:3268, full:true"]

Thats good to know! But we end up having the same "problems" that the theme will break once a user removed one of those params (accidentally) from the advanced settings. So instead of having custom options for every theme we register options for the available spirit.plone.theming categories. A UI with a dropdown select option is, from our experiences, much better. Your theme, for example, could register 6 available layouts ('a', 'b', 'm', 'f', 'x', 's').

No, this does not break, since I use a control panel for the settings:
https://github.com/espenmn/medialog.bergensiana/blob/master/medialog/bergensiana/interfaces.py#L115-L137

(the bergensiana theme is 'very much under construction', but basically supports all the things you mention (on github, not Pypi)
I wanted to add the 'color scheme setting', but for this I need help to 'reverse engineer' CSS to LESS.

9

Use collective.multitheme instead of the bergensiana theme