Difficulty customizing theme of new Plone 5.1.5 site

Plone Support
1

I've spent the last couple of days throwing up a new intranet to supercede our old one (faithfully running Plone 3.1.7 for some time now).

Versioning Info for troubleshooting:

  • Plone 5.1.5 (5115)
  • CMF 2.2.12
  • Zope 2.13.27
  • Python 2.7.15+ (default, Nov 27 2018, 23:36:35) [GCC 7.3.0]
  • PIL 5.4.1 (Pillow)

I'm trying to tweak some of the CSS to get things looking a bit more in line with our corporate aesthetics, but I'm running into some problems (bugs?).

I'm using the Barceloneta theme, but I've also tried making a copy of it and activating that, with the same results. (Honestly, I'm not that up to speed on Plone theming.)

Okay! So, following a tutorial, I start by going to Site Setup, then Resource Registries. I click "Development Mode", and then click "Save" to save that change. I immediately receive the following error:

"Error processing ajax request for action: save-registry"

If I refresh the page, Development Mode is still unchecked.

I've tried, just spitballing, changing one of the settings under Less Variables (plone-toolbar-internal-color) and then, since I couldn't enable Development Mode, I assume I have to rebuild things and clear the cache next to make that change take effect. However, if I click "Build" for the Plone bundle on the Registry tab, and click "Build It", I get:

  • building javascripts
  • Saved javascript bundle, Build results:

FUNCTION ---------------- ./++plone++static/components/bootstrap/js/dropdown.js ./++plone++static/components/bootstrap/js/collapse.js ./++plone++static/components/bootstrap/js/tooltip.js ./++plone++static/components/patternslib/src/core/mockup-parser.js ./++resource++mockupjs/utils.js ./++resource++mockuplib/jquery.event.drag.js ./++resource++mockuplib/jquery.event.drop.js ./++plone++static/components/pickadate/lib/picker.js ./++plone++static/components/underscore/underscore.js ./++plone++static/components/patternslib/src/core/compat.js ./++plone++static/components/patternslib/src/core/jquery-ext.js ./++plone++static/components/jquery-form/jquery.form.js ./++resource++mockupjs/i18n.js ./++resource++mockupjs/i18n-wrapper.js ./++plone++static/components/select2/select2.js ./++plone++static/components/pickadate/lib/picker.date.js ./++plone++static/components/moment/min/moment-with-locales.min.js ./++plone++static/components/pickadate/lib/picker.time.js ./++plone++static/components/logging/src/logging.js ./++plone++static/components/patternslib/src/core/logger.js ./++plone++static/components/jquery.browser/dist/jquery.browser.js ./++plone++static/components/patternslib/src/core/utils.js ./++plone++static/components/patternslib/src/core/registry.js ./++plone++static/components/patternslib/src/core/base.js ./++resource++mockup/select2/pattern.js ./++resource++mockup/pickadate/pattern.js ./++resource++mockup/autotoc/pattern.js ./++resource++mockup/cookietrigger/pattern.js ./++resource++mockup/formunloadalert/pattern.js ./++resource++mockup/preventdoublesubmit/pattern.js ./++resource++mockup/base/pattern.js ./++resource++mockup/formautofocus/pattern.js ./++resource++mockup/markspeciallinks/pattern.js ./++resource++mockup/livesearch/pattern.js ./++resource++mockup/contentloader/pattern.js ./++resource++mockup/moment/pattern.js ./++resource++mockup/backdrop/pattern.js ./++plone++static/components/backbone/backbone.js ./++resource++mockupjs/router.js ./++resource++mockup/modal/pattern.js ./++resource++plone.js

  • building CSS bundle
  • Error building bundle
  • Error in build process
  • 1 css files to build
  • Error saving css bundle
  • Error in build process

...and, of course, nothing on the site changes.

Any idea what's up?

2

A month passed, I don't know if you have any luck figuring it out. I am new to Javascript, so all the stuff (RequireJS, ShouldJS, Grunt, JShint, AMD, etc. etc.) are hitting me like a falling brick wall. I just want to share some of my experience.

The TTW bundle building has very little useful error message. If you got a blank page or non-responsive spinning wheel, it usually means some javascript error. Check Firebug for error. Or revert everything back to start, then add back lines or code blocks little by little to narrow it down.

Currently I have trouble with the TTW build since it won't pickup any changes I made in .js file. The command line compiling (bin/plone-compile-resources) gives me multiple *-compiled.js files instead of one. If there is some javascript error, the compiler will throw a message about jscompilation having empty value. I was working with Plone 5.1.4. I upgrade to 5.1.5 but things are not improving in this matter.

I wish more people will raise questions about javascript development specifically with Plone addons. In many cases, I don't need a new pattern from ground up. I just want to tweak, use and/or extend current patterns. Plone doc did a great job explain how to extend/override a view, a behavior, an adapter etc. But very little on javascript. I previously posted how to add a one line modification to modal pattern. I have to pick up hints from a variety of places to put it together. It worked, but I have no clue if that's the right way or the best practice. Some help from javascript gurus will be great, especially who are familiar with Plone integration.