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.
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.
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. (
- save my changes
- select the
barcelonetta.plone.less file and click on "compile css" to create a new
- 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).
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.