Hi!
what is the fastest and simple way to change some colors in Plone/Barceloneta? Can we avoid cloning/Inheriting the Barceloneta theme?
P.S: turning the development mode on/off made the toolbar/control panel icons disappear if I change some less values.
For example this:
https://training.plone.org/5/ttw/basic.html
doesn't work. Turning develpment on and saving will make icons disappear.
https://demo.plone.org/@@theming-controlpane
Then go to advanced settings and enter some custom.css, see:
Thanks!
So I suppose I should customize the theme using npm and grunt, then pack it and upload in the theme panel? Should I forget bundles, resources and so on?
Well, the custom.css goes in a registry record: https://demo.plone.org/portal_registry/edit/plone.app.theming.interfaces.IThemeSettings.custom_css
If you just want to customize just some CSS rules (I thought that was the original request) that was the way to go in my opinion.
If you want to do some more complex stuff, I think I am not the right one that should answer you 
BTW, the last time I had a similar use case was quite some time ago and my less was something like:
@import "/path/to/plonetheme/barceloneta/theme/less/barceloneta.plone.less";
/* some rules */
and had a watcher that was compiling the less.
But it was an early Plone 5 and definitely something non standard. Other people might come up with better solutions!
As @alert said, the custom.css is thought for quick and dirty customizations.
If you're planning to work with a less compiler anyhow, probably better create an add-on package with https://pypi.org/project/plonecli and add a theme_barceloneta inside that package.
With theme_barceloneta you have all files set up to create/customize a theme based on plonetheme.barceloneta.
There is a quick and dirty way that could be an option in some cases:
Duplicate the barceloneta theme in the control panel and name it the exact same, then just edit the css file.
You can always compile that CSS file from less 'manually' if you prefer that, just install lesscss, change the colors and run 'lesscss theme.less theme.css (if I remember the syntax correctly)
So I can avoid to work with less, and edit the css directly? Maybe this is the best option.
Yes you can (but take a copy since recompiling less will make a New css file)
Just keep in mind that with the custom.css you add extra KBs of resources to the already existing resources of your site.
I am not taking about custom css, but editing the barceloneta.css file.
The Less files generate the CSS, but if one don't want to work with Less, one can edit the css directly.
Of course, it might make things a little more complicated when upgrading and one needs to take a backup of the css file, but apart from that, it is 'much easier'.
What can be done is this:
I use CSSEditor, then one can see the updates 'live', there are probabably other editors too
Update: new video
I often use GitHub - collective/collective.localstyles: Add local styles to subsections in your Plone site. for overwriting the styles within a container or for the whole site.
One customer regulary needs some tweaks and for that this is the fastest way to modify styles.
Sometimes it can be a bit confusing (where the styles come from), though…
Slightly related: I have Mosaic fragments that do the same (write your own CSS) and also some that 'does specific things', for example 'Hide Breadcrumbs', but that is more for 'designing layout' than 'everyday use' ( I make templates that can be reused by customer)
Find this fantastic. Is this code published somewhere?
About less, I think that exposing the variables in the bundle/resources panel si wrong if changing them does not change anything. It is confusing and can break the site for the tipical users.
This is collective.themingfragments (with a little change by me to sort the fragments alphabetically)
The fragments are part of one of my commercial themes ( http://themes.medialog.no ), but I have shared 'how to make them' in this forum before.
