Customizing Plone 5.1.6: Bundle Builder hangs forever

I'm attempting to follow this guide on customizing the Barceloneta theme in Plone 5 through the web interface:

http://datakurre.pandala.org/2015/05/customize-plone-5-default-theme-on-fly.html/

I get as far as the instruction to "Build mytheme bundle" -- step 6 of the section "Register and Build a new LESS bundle" -- but clicking Build results in the following on-screen dialog box:

Bundle Builder
You are about to build the kshtheme pattern.
This may take some a bit of time so we will try to keep you updated on the progress.

  • building javascripts
  • No javascripts to build, skipping
  • building CSS bundle
  • 1 css files to build

At that point, a circular progress marker goes around more or less indefinitely -- I left it going for 12 hours yesterday with no result.

The site is still responsive if I make requests to it in another browser tab.

The following log entries are in the instance.log:

2019-11-15T13:57:00 INFO plone.protect auto rotating keyring _forms
2019-11-15T13:57:00 INFO plone.protect auto rotating keyring _anon
2019-11-15T13:57:00 INFO plone.protect auto rotating keyring _forms
2019-11-15T13:57:00 INFO plone.protect auto rotating keyring _anon
2019-11-15T13:57:24 INFO Products.CMFPlone Cooking js ++resource++plone.app.discussion.javascripts/comments.js
2019-11-15T13:57:25 INFO Products.CMFPlone Cooking js ++plone++plone.app.event/event.js
2019-11-15T13:57:25 INFO Products.CMFPlone Writing cooked resource: static/plone-legacy-compiled.js
2019-11-15T13:57:25 INFO Products.CMFPlone Writing cooked resource: static/plone-legacy-compiled.css
2019-11-15T13:57:34 INFO Products.CMFPlone Cooking js ++resource++plone.app.discussion.javascripts/comments.js
2019-11-15T13:57:34 INFO Products.CMFPlone Cooking js ++plone++plone.app.event/event.js
2019-11-15T13:57:34 INFO Products.CMFPlone Writing cooked resource: static/plone-legacy-compiled.js
2019-11-15T13:57:34 INFO Products.CMFPlone Writing cooked resource: static/plone-legacy-compiled.css
2019-11-15T13:57:54 INFO Products.CMFPlone Cooking js ++resource++plone.app.discussion.javascripts/comments.js
2019-11-15T13:57:54 INFO Products.CMFPlone Cooking js ++plone++plone.app.event/event.js
2019-11-15T13:57:54 INFO Products.CMFPlone Writing cooked resource: static/plone-legacy-compiled.js
2019-11-15T13:57:54 INFO Products.CMFPlone Writing cooked resource: static/plone-legacy-compiled.css
2019-11-15T13:57:58 INFO Products.CMFPlone Cooking js ++resource++plone.app.discussion.javascripts/comments.js
2019-11-15T13:57:58 INFO Products.CMFPlone Cooking js ++plone++plone.app.event/event.js
2019-11-15T13:57:58 INFO Products.CMFPlone Writing cooked resource: static/plone-legacy-compiled.js
2019-11-15T13:57:58 INFO Products.CMFPlone Writing cooked resource: static/plone-legacy-compiled.css

And that's it.

Any idea how to get around this, or what might be causing it to hang?

What I'm ultimately trying to do is customize our site theme, but I'm trying to begin by starting from Barceloneta and tweaking small things like the colours and such, so that tutorial seemed relevant. Is there another approach entirely that I should be taking? (For example, making a copy of the Barceloneta theme and editing that?)

My versioning is as follows:

* Plone 5.1.6 (5116)
* CMF 2.2.13
* Zope 2.13.29
* Python 2.7.14 (default, Nov 11 2019, 09:55:37) [GCC 4.8.5 20150623 (Red Hat 4.8.5-39)]
* PIL 6.1.0 (Pillow)

I'm not sure if this is relevant or not, but the same thing happens if I go to Site Setup > Theming > Modify Theme, choose any .less file, and click Tools > Build CSS and tell it to build it (with the default values left unchanged). The status line in the LESS Builder dialogue box says, "Working..." and never changes to anything else.

I never found out why but I have the same problem

Which browser om which OS are you running the build steps in? This is relevant because the source files are sent to the browser and the browser javascript engine is doing the actual building/compiling and afterwards sendimg the results back to the server.

I'm using Microsoft Edge on Windows 10.

I can confirm that the process completes (or seems to complete) when using Chrome instead of Edge, so that's something.

The instructions on the page still don't work at all, but at least they fail differently: All pages render with the default "replace this page with your theme" page in the index.html file. Replacing that file with the code from index.html in Barceloneta (since the remainder of the tutorial indicates that it's importing everything else from Barceloneta) produces blank pages.

Is there a good tutorial on customizing themes somewhere that applies to and works on 5.1.6? There seems to be a real lack of both documentation and themes available.

I just noticed that while the bundle builder in Resource Registry seems to now complete when using Chrome, using "Tools > Build CSS" in the theme editor still does not, as far as I can tell. Is there a browser where it works, or an alternate way to build the compiled CSS from Less when doing TTW theme customization?

I noticed issues with 'unicode' characters in the files.

In other words:
If the files contained for example

.someclass:after { content: 'å' }

the building / saving would not work.

But if you change to

.someclass:after { content: 'å' }

it was possible to save ( maybe build, too )

Could you try

  1. Make a simple less file
  2. Bulid it
  3. Make a less file with some unicode letters in it
  4. Build it.

Does both fail ?

Okay, I created a file called testcase.less containing:

.someclass:after {
   content: 'å'
}

...and nothing else, and that actually SUCCEEDED. I've literally never seen it succeed before, so that's surprising and bizarre.

As you suggest, replacing å with å causes it to fail to save. (Compilation still "succeeds", but looking a the resulting CSS file, you can see that it's still based on the old code.)

I have not had the time to find out why, but I suspect some other add on 'makes the problem'.

Maybe
plone.resourceeditor
plone.jsonserializer

You could try to search for unicode errors (here), probably some of the ones I have tried to figure out, too

https://community.plone.org/search?expanded=true&q=unicode%20%40espenmn

1 Like

Wow! Pinning plone.resourceeditor = 2.1.1, as suggested in the link that you provided, and it actually fixed the issue! THANK YOU SO MUCH. I'm not sure I know enough to help in the search for errors, but I really appreciate this a lot.

1 Like

Hmm. Well, okay, it fixed it... SORT OF. :frowning: I can now compile barceloneta.plone.less in my copy of the barceloneta theme, and it succeeds. However, if I make changes to the various less files in the theme and re-compile, it doesn't actually update. (I tried changing two of the colour variables in variables.plone.less --

@plone-body-bg: #dadada;
@plone-footer-bg: @plone-body-bg;

...and compiling produced no change in the site. I thought it was a caching issue at first, so I tried clearing the site cache using the Clear Cache button on the TTW editor and also clearing my browser cache, to no effect, so then I ran a find on "dadada" on the barceloneta.compiled.css file, and it doesn't find it at all. Finding on the old value -- "fafafa" turns it up in the body background style.)

I thought perhaps my changes to variables.plone.less weren't really being saved, but even if I stop and start the site, close and re-open my browser, and clear my browser's cache, they still show in variables.plone.less, but they just don't get incorporated when compiling barceloneta.plone.less.

I then decided to just change barceloneta.plone.less directly -- adding:

body {
bg-color: #dadada;
}

To the end of it as directed in some of the tutorials on beginner theme customizing, and that also didn't get compiled or affect the site. So I'm genuinely not sure what's going on there. It did compile the file at least once, because I had actually tried (in desperation) to download the theme, hand-edit barceloneta-compiled.css, and re-upload it, and that actually worked to update a style and have it take effect, and when I ran the compile the first time, that change reverted. However, this business where no other changes have any effect is mystifying.

Maybe it is because of the wrong syntax?

body { background-color: #dadadad; }

Well, that's embarrassing for me. You're right; it was.

I believe the issue with it not "reading" the variables may have been that I wasn't going back to the theme panel and clicking "Update" after, but I'm not sure. I got colour changes to work both ways now.

Now to back-port all the changes that I've been making by hand-editing the compiled CSS to the less files. sigh :slight_smile: THank you again.