Problems altering less variables in a copy of Barcelonetta

cewing · July 10, 2016, 12:20am

Greetings,

I'm playing around with various ways of working on modifying the existing Plone theme. My first tries here have involved working with the less variables to alter colors. The problem I'm having is that persisting my changes is proving more tricky than I'd hoped it would be. I've tried two different approaches and both are failing in different ways. I wonder if someone might help me discover what I'm doing wrong.

First attempt

My first attempt dealt entirely with the LESS variables panel in the resource registry control panel. Here are the steps I took:

Go to Site Setup > Resource Registry
Turn on development mode
Enable CSS development for the Plone bundle
Went to the "Less variables" tab and altered the variables I wanted changed (I also had to add several, because the list there is not complete, even for changing the navigation bar color)
Saved my changes
Viewed my site, noticed that the changes had taken place, and all was lovely.
Turned off developement mode.

At this point, I hoped that my changes would stick, but they did not. The site immediately reverted to the original colors. Okay, perhaps I need to rebuild the Plone bundle to get things to stick.

Return to the resource registry and rebuild the Plone bundle
View front end, notice that the changes I made to less variables did not stick.
Return to the resource registry, turn on dev mode and develop Plone css, then rebuild the bundle
Still no change to the colors I'm viewing.

After reading a few posts here on this forum, I saw that the Barcelonetta theme is entirely Diazo based, and so my changes in the resource registry will have no effect on it.

Based on this, I will summarize my first take-away:

The purpose of the Less variables tab in the resource registry is to experiment with changes, without expecting any changes made there to be permanent.

Second Attempt

The failure of my first attempt led me to try a new approach, working with a copy of the Barcelonetta theme. Here's what I tried there:

Go to the "theme" control panel and make a copy of the Barcelonetta theme
click on 'Modify theme' to make changes
change my desired less variables in the variables.plone.less file in my modified theme. (plone-link-color, plone-link-color-on-grey, plone-link-color-on-dark, and plone-sitenav-link-hover-bg)
save my changes
select the barcelonetta.plone.less file and click on "compile css" to create a new barcelonetta-compiled.css
activate my new theme
view the front page

My expectation was that the navigation bar, and all links in the page would be changed to reflect my new color choices.

The actual result is that the active navigation button changed color, but despite having changed the plone-link-color value, every other variable that referred to that variable name as its value remained as the original Plone blue (so the inactive site nav buttons, the navbar background and all in-page links).

I wondered if perhaps changing places in the variables where a second variable referred to plone-link-color as a value to refer directly to a color value would work. So I tried again:

find references to plone-link-color in the variables file and replace them with the color value already set as plone-link-color earlier in the same file.
recompile my css in the same fashion as above.

I expected this to solve my problem, but it did not completely work. Now the navbar has changed colors appropriately, but all my in-page links (not those on grey or dark) are still the original plone blue (though the hover color for them has now updated).

Conclusions

From the results I'm getting, it would seem that although one might expect "compile css" to recompile all the css using the changed values in variables.plone.less this is not actually happening. Any css that was first compiled using the original value of plone-link-color via the variable name remains unchanged, despite the change in the value of that variable.

Plea for help

If there is in fact some way to effect change in compiled css values across all, I would appreciate any pointers. If it turns out that this is a bug in css compiling TTW, it would be good to fix it. It does complicate the story of creating a thin modification of the existing Plone theme via the theme editor.

ebrehault · July 10, 2016, 11:28am

Hi @cewing,

Your first attempt was quite good, but there is a fundamental issue here: LESS variables only works when LESS compilation is involved, when you are in production mode, you just use the Barceloneta CSS from the sources, and no compilation is involved. So your variables are not considered.
Obviously, we do not want and we cannot change the Barceloneta sources, so if we want to be able to persist our changes, we need our own theme, where we will compile our own CSS from LESS (and using our LESS variables from the resources registry).
To do that, the best approach is to create an (almost) empty theme that will inherit (almost) everything from Barcelonta (I say "almost" because index.html cannot be inherited but everything else can).
See http://docs.plone.org/adapt-and-extend/theming/barceloneta.html#inheriting-a-new-theme-from-barceloneta to do it.
Once you have your styles.less containing:
@import "++theme++barceloneta/less/barceloneta.plone.less";
then you can change any LESS variable in the Resource registry LESS variable tab, go back to the Theming editor, and compile your LESS in CSS.
Then your variable changes will be compiled and persisted in your styles.css file.

Your second attempt should work the way you did it, but there might be a confusion about LESS compilation. When you say:

one might expect "compile css" to recompile all the css using the changed values in variables.plone.less

Actually there is only one LESS file that can be compiled (barceloneta.plone.less), and it produce one unique CSS file (barceloneta-compiled.css indicated in your manifest.cfg as production-css), the other LESS files are just included in the main one. So maybe you compiled the wrong LESS file.
If you compile the right file, your approach should work.

But still, you should probably inherit from Barceloneta rather than copy it entirely.
So here again, you should do what is explained here:
http://docs.plone.org/adapt-and-extend/theming/barceloneta.html#inheriting-a-new-theme-from-barceloneta
And instead of using the LESS variables control panel (as in the first approach), you can just put your variable values in your styles.less file directly (that's what I usually do instead of using the control panel).

davilima6 · July 10, 2016, 12:37pm

I suggest we add this explanation to the Less variables tab, otherwise most people will likely get confused.

ebrehault · July 10, 2016, 2:12pm

@davilima6 you are right, and we must be very specific in this explanation:

Less variables are used in bundles,
changes will be considered immediately when we are un dev mode,
in prod mode, changes will be effective (and persistent) only if we re-build the impacted bundles,
some Less variables are used both by regular bundles and by Barcelonetta,
and as the theme bundle is special, we do not re-build it from the Resources registry, it is managed from the Theming editor and for prod mode it requires a custom theme (so we can use the "Build CSS" button and persist the resulting CSS).

If anybody can rephrase that in a simple way, we could add it at the top of the Less variable control panel.

Note: before Andreas makes any comment :), let say this: I know it sounds messy, but it is working that way for good reasons:

the Resource registry is about managing resources, patterns and bundles, and not the theme,
we could have managed theme bundle with the Resource registry but it would make the theming story much more difficult, that's why the theme bundle is special, so everything about theming can be done from the theming editor.

But as Barcelonetta uses some Less variables from the Plone default bundles, we made sure our theme bundle can access the less variables from the registry.
As a result, we can manage theme-related Less variables from the Less variable control panel.

It sound handy at the time, but maybe it was not such a good idea as it makes things confusing.
Maybe we should have a complete separation between Plone bundles and theme.

cewing · July 11, 2016, 7:03pm

@ebrehault, @davilima6 Realizing that my original post is perhaps over-long, I want to provide a quick set of steps to reproduce what I am seeing:

Start with a fresh installer-based Plone 5.0.5 site
Log in as admin
Go to Site Setup > Theming
Make a copy of the Barceloneta theme, and activate it
Click on "modify theme"
Select the variables.plone.less file in the theme editor
Change the value of plone-link-color to something obviously different, like #FF0000
Select the barceloneta.plone.less file in the theme editor
Click on the "build css" button to create a new version of barceloneta-compiled.css

I expect that there will be some change in the site appearance. Given what you've said above, I think that I am correct in thinking that you too will expect that to be the case. I think that the barcelonetta.plone.less file uses the variables set in variables.plone.less to fill out the values for colors throughout the remaining less files (and thus in all the compiled css. What I am reporting is that by following those exact steps on a brand new Plone 5.0.5 site I see no difference whatsoever in the appearance of the site, even after recompiling the css in the manner I describe above.

I think, based on what you've said above, that this is a bug.

ebrehault · July 12, 2016, 9:33am

@cewing yes that's confusing, but I am afraid it is not a bug.

Here is the the thing:

if you do what you said, indeed, the link colors is not modified,
but if you do what you said and in step 7, change @plone-body-bg value to #FF000, then you will see a red background.

The difference is @plone-body-bg is not managed in the Less variables control panel, while @plone-link-color is managed in this control panel, and the value from the control panel wins over the one you put in your less file.

It is very confusing, and that's why I think Barceloneta should use its own variables, separated from the one used in the bundles.

cewing · July 12, 2016, 4:55pm

Ahhhhh. Now I understand, @ebrehault.

This brings up an interesting point, in my mind anyway. If any less variable that is managed by the Less variables control panel can no longer be changed in a theme to any effect (since the one in the control panel takes precedence), and if the ones managed by the control panel cannot be changed persistently through the web (which appears to be the lesson of my first attempt at changing the colors), then of what use is the Less variables control panel?

This is not to criticize it, I found it quite useful in experimenting with colors, but it would appear that changes made there have no effect once the resource registry is taken out of development mode. That really reduces the use-cases in which changing a value through that interface will have any long-term useful effect.

ebrehault · July 13, 2016, 7:43am

@cewing I guess the Less variables control panel is useful in 2 cases:

when you want to customize the Mockup patterns
- but the truth is Mockup pattern does not use those variables a lot, I had a quick look, and apparently there is only one variable (@plone-link-color) used only once (in the structure pattern);
when you want to customize Barceloneta but you do not want to put your hands into Less/css things (remember the old ages, some prefered to change dtml variables in the ZMI instead of writing directly in ploneCustom.css.dtml)
but it implies to create a custom them TTW and use Build CSS button, both of those actions are in complete different part of the Plone UI

So even if it might be useful, it is a very weak feature at the moment.

I think we should either restrict it to pattern-related variables only (so that's not much at the moment but it could evolve in the future), either have intermediary variables in Barceloneta, for instance:

we keep @plone-link-color in the control panel,
in barceloneta, we define:
@barceloneta-link-color: @plone-link-color;
and then we can either use the control panel (assuming we have a custom TTW theme, etc.), either customize Barceloneta from the Theming editor using the @barceloneta-link-color variable

I have submited a PLIP for that: https://github.com/plone/Products.CMFPlone/issues/1677