How do you get your themes done now?

Quick question. What do you do about your Plone themes now?
Do you just reuse the free themes that are available?
Do you create themes from scratch using Diazo?
What about Mosaic?
Just trying to get a feel...

2 Likes
  1. from Scratch with Diazo for bigger Sites
  2. for Singlepage Sites i use Mosaic with customized CSS
  3. Mosaic only for Editors that "they know what they do"
  4. The Layout Template comes mostly from a Agency :wink: , not from a Webportal with free Design Templates
  • From a designer (or theme forest) as html/js/css and then use diazo integrate it with plone. Using mosaic for landing pages (sometimes converting deco grid to BS grid) and themefragments and themesitesetup.
  • we sometimes reuse our own themes (done via above) but never reuse free themes (other than barcenoneta for some intranets)
1 Like

Usually Diazo although I consider Diazo meanwhile more and more as a major pain in projects than as a helpful solution:

  • source and target markup and structure often different requiring complex transformations
  • mixture of CSS selectors and XPath expressions often hard to read and understand, in particular after some time
  • source templates often contain theme related classes that do not belong there. The markup of the source site should be in general agnostic of the theme markup but we often inject target css classes into source templates for convinience or other reasons. I also found the same issue in huge automative site that is based on Plone...very hard to maintain, very hard to understand for new developers in Plone what belongs where and why - in particular in legacy systems.
  • we often fix things in Diazo that would perhaps better be fixed in source template because the source template are in some cases just broken
  • Diazo rules are often to narrow or unspecific in order provide a certain flexibility to the backend developer without having to involve the frontend developer for every single change in the markup.
  • Plone backend dev and frontend dev (Diazo) must work hand in hand and communicate. In reality there is no clear separation between frontend and backend devs - both need to work hand in hand.
3 Likes

I like to use mosaic site layouts (and content layouts as well), because of the freedom of HTML they bring. In one project we managed to have zero Diazo transforms this way. But usually minor Diazo adjustments are still needed, but very reduced.

My current thoughts on Mosaic..... I've worked on two projects that utilized Mosaic for layout. We expected that end users would use it for quick layouts. That didn't really happen.
Mosaic is a useful tool for managing layouts and to some extent, designing layouts, but not for the typical end user.

Undo support would make it more useful
I can't press cmd/ctrl + z to undo something I'm working on. End users expect that If they've dragged something to a new slot, if they have a change of mind, they expect a simple way to undo.

I don't like how tiles are presented now in the UI
Tiles need to have some form of preview (before you start to drag).

No Volto stories?

There is not much to add for Volto. Volto theming is just using standard web technologies (HTML, CSS, LESS, Semantic UI, JSX) together with a simple jbot-like approach to override existing components.

Our experience so far is that it usually takes less work to build a Volto-theme in comparison to Diazo or traditional Plone theming. Pastanaga UI with its reduced UI helps a lot as well.

People familiar with standard web technology can be trained in Volto-theming a lot faster, because they do not need to understand a single Plone/Diazo concept.

My personal opinion is that we radically simplified theming with Volto for the better. I like the flexibility of Diazo a lot. Though,I've seen it being misused by 90% of the devs I worked with (using complex XSLT transformations instead of just customizing a template) and we ran into some serious performance issues in large-scale projects. Diazo and XSLT had their time. Those times are over IMHO...

2 Likes

Thanks @tisto,
I've been turning my attention (maybe turning it back) to theming Plone in the last 2 to 3 months. Coming from the Plone side of things, Volto didn't seem as compelling. However, your rationale makes sense, once I think about on-boarding persons experienced with standard front end tools.

I'm okay with compromising around defacto tooling, like letting go of mercurial for git or restructured text for markdown. It just takes a bit of mourning. I've drank deeply from the well of Diazo goodness and know the power, but it is what it is.

With respect to adoptiong Volto, I had a road block over the last 2 months because I wasn't comfortable with the state of the Volto documentation. I've started to "scratch my own itch" and just fix it when I can make time now.
my second contribution --> https://github.com/plone/volto/blob/deployment-docs/docs/source/07-deploying/02-pm2.md

I'm still due to make my first Volto theme... we'll see!

I think this is a huge concern. In the context of Diazo is it even possible to draw the line between backend and frontend?
When we say frontend do we me css, html and js only or should we expect knowledge of our templating system? For example, do themefragments (somewhat of a templating system), count as backend or frontend?
I'm posing these questions not knowing the answers at the moment.

At the moment, we build our themes using https://webflow.com and then port them to Plone.
This approach relies heavily on Diazo and gives you a faithful rendering of the original theme.
Here's a theme I'm working on this week (early days, work in progress).

1 Like

I raised the idea of a minimum viable theme almost 2 years ago. Themes would be graded based on an objective, verifiable standard. I'm testing out how much work this would take to achieve this with an existing webflow.com theme.

For reference... here's a link to my proposal:

We are working on a Bootstrap 4 based Plone Theme at the moment. It is called plonetheme.tokyo.

  • No Diazo Rules
  • No Barceloneta Dependencies
  • No React
  • But still Plone Views and Pagetemplates. Just with real Bootstrap 4.

Version 0.1.0 was released today: https://pypi.org/project/plonetheme.tokyo/

Still have some work to do... and then create some screenshots... But it's growing.

A little warning: All other themes are broken after install (not even barceloneta is working).
Uninstalling the theme does not help

I have Mosaic running with Plone5.2 / python 3.
There is one (javascript?) bug which seems to happen with all other themes than barceloneta (which proabably means some javascript has been added in latest version):

To work around it, do this.

  1. Switch to barceloneta theme.
  2. Delete (or hide) layouts in Mosaic editor
  3. Choose Mosaic layout for some content
  4. Save the layout
  5. Change to your theme

Now you will not 'end in an infinitive loop of dialog boxes saying 'can not use default layout' '

1 Like

Wow!

Could be true. There are lots of changes that still need to be reverted in the uninstall profile, I guess.
I created an issue for it: https://github.com/collective/plonetheme.tokyo/issues/32

Thanks for the feedback and thanks for trying the theme. :wink:

(Update:) This is NOT related to Python 3, but looks more like (another Plone 5.2) unicode error. I have not figured out why yet, maybe it is the same as I have seen elsewhere, where 'the checking with six' is a problem?

2019-08-28 13:11:06,284 ERROR   [plone.transformchain:70][waitress] Unexpected error whilst trying to apply transform chain
Traceback (most recent call last):
  File "/Users/rolf/Plone52/buildout-cache/eggs/plone.transformchain-2.0.1-py2.7.egg/plone/transformchain/transformer.py", line 59, in __call__
	newResult = handler.transformIterable(result, encoding)
  File "/Users/rolf/Plone52/buildout-cache/eggs/plone.app.theming-4.0.1-py2.7.egg/plone/app/theming/transform.py", line 176, in transformIterable
	cache
  File "/Users/rolf/Plone52/buildout-cache/eggs/plone.app.theming-4.0.1-py2.7.egg/plone/app/theming/utils.py", line 698, in prepareThemeParameters
	params[name] = quote_param(expression(expressionContext))
  File "/Users/rolf/Plone52/buildout-cache/eggs/Zope-4.1.1-py2.7.egg/Products/PageTemplates/ZRPythonExpr.py", line 49, in __call__
	return eval(self._code, vars, {})
  File "PythonExpr", line 1, in <module>
AttributeError: 'FilesystemResourceDirectory' object has no attribute 'portal_registry'
2019-08-28 13:11:06,291 WARNING [waitress:498][waitress] application returned too few bytes (0) for specified Content-Length (1059) via app_iter

Another update:

I have discovered that if you add the same layouts that does not work from the filesystem to the Mosaic editor by copy/paste they work.

Could it be that text is read as binary (or the other way around)
Why they work from the filesystem with barceloneta is very unclear though…