Hi there,
is there a canonical way for easy theme customizations in Plone 5 like changing some LESS variables?
-aj
Through the ZMI? Seriously? I am scared.
-aj
You can set the LESS variables values in the "plone.lessvariables" record in your profile's registry.xml.
Note: you will have to re-build your resources.
Eric
The way I'm doing barceloneta derived theme customizations is:
- Download barceloneta zip theme
- Uncompress it, modify the literals from manifest.cfg to the theme ones
- Modify the less/*.less files
- Execute a less compiler with your favourite task tool (there is a gruntfile on root of py package of barceloneta)
- Upload to plone or add to your theme package
The cons is that it will not evolve with barceloneta upstream unless you remerge it manually.
Barceloneta theme is a pure 100% diazo theme so its not registered to be customizable on the fly with the registry. There was a discussion on GH about it : https://github.com/plone/plonetheme.barceloneta/pull/37
Right now as barceloneta theme is 100% diazo you CAN'T modify variables TTW, neither recompile it TTW. It has its cons and pros. The good thing is that you can deliver the zip file to a front developer and get it back with the style you need. I think that Munich sprint is going to work on documentation on this subject.
Things to remember here everyone:
- There is a less configuration panel in the Resource Registry control panel
- http://datakurre.pandala.org/2015/05/plonecustom-for-plone-5.html is no longer necessary. There is an add button for custom registry files
- There is a built-in less compile button on the theme editor now
1 Like
Ou yea nathan you rock!
So there is an option to customize barceloneta TTW : the theme editor, edit the variables.plone.less, select the main one (barceloneta.plone.less) and press the compile css button e voilĂ !
That's cool.
Thanks
Imagine we have an existing theme provided by the sources and named "original-theme", and there is a specific bundle to handle the theme's js and css, which are resources like ++theme++original-theme/blabla.
Let's say we want to customized it TTW:
- we copy the current theme with the Theme control panel and name it "ttw" for instance
- we change the less files,
- if we want the less to be built, we need to declare a specific resource targeting our ++theme++ttw/style.less, and a bundle containing this resource, and them build it.
It would be nice if we could avoid to create a specific bundle and a specific resource, but just re-use the ones from the original theme.
It would imply to declare our resources like this: ++theme++/style.less
Not sure if I understood everything, but AFAIK, this should already be possible. You only need to define resource locations in manifest.cfg (development_css, development_js, ...) and behind the scenes a hidden "diazo" bundle is created and used. (Before it was possible to build the bundle directly in theme editor, I created a bundle to be able to build it TTW.)
Oh that's right!
So the good practice is to NOT create a bundle for our theme css, we just build them from
Thanks.
What about those variables that are not set here: for example: can you set the globalnav background ?
So I've been working on this thing called Gloss. It aims to make Diazo theming even easier by working with a collection of predefined CSS classes which Diazo is preconfigured to look for.
Here's an example of Gloss in action:
Documentation (still incomplete) is here:
http://the-gloss-project.readthedocs.org/en/master/
3 Likes
What kind of restrictions does this make on the kinds of theme you can use? For example won't that make assumptions about the menu HTML?
@djay,
You're right it has to make assumptions about the menu structure. But there's a limited number of types of menus. Targeting the two major types (bootstrap style list based and webflow style nav > a based) has gotten us lots of mileage. We've mostly been using Webflow and it works out of the box for that. It does make allowance for Bootstrap style menus, I haven't tested that recently so I can't make promises about that.
There's a similar situation with the grid systems it supports. I've started to break out the grid transformations into separate xml files so they can be included as modules.
The big win is that it has simplified our workflow significantly and a designer can confidently "mark" content by just adding css classes.
1 Like