Theme_barceloneta (as created by bobtemplates.plone) not working as expected

I've created an addon with a theme_barceloneta with bobtemplates.plone.
I expected to get a working theme that we can edit and customize.
But after activating the theme Plone renders unstyled and the created theme is not editable

What am I doing wrong? Do I miss some point?

I include here the steps to reproduce it:


sudo rm -rf ${WORKING_DIR}/${ADDON_NAME}

# create addon
cat <<EOF \
    | sudo tee ${WORKING_DIR}/${ADDON_NAME}_bobtemplates.plone.addon.ini
[variables] = theAuthor =
author.github.user = GitHubUsername
package.description = An add-on for Plone
package.git.init = True
package.git.autocommit: True
plone.version = 5.2.6
python.version = python3.9
vscode_support = False

sudo ${PLONE_HOME}/zeocluster/bin/mrbob \
    --config ${ADDON_NAME}_bobtemplates.plone.addon.ini \
    -O ${ADDON_NAME} bobtemplates.plone:addon

# create barceloneta_theme

cat <<EOF \
    | sudo tee ${WORKING_DIR}/${ADDON_NAME}_bobtemplates.plone.theme_barceloneta.ini
subtemplate_warning = n = My Theme
package.git.autocommit: True

sudo ${PLONE_HOME}/zeocluster/bin/mrbob \
    --config ${WORKING_DIR}/${ADDON_NAME}_bobtemplates.plone.theme_barceloneta.ini \

# create buildout cfg-file
cat <<EOF \
    | sudo tee ${PLONE_HOME}/zeocluster/${ADDON_NAME}.cfg
extends =
eggs +=
${ADDON_NAME} = fs ${ADDON_NAME} path=src

# chown
sudo chown -R buildout_user:plone_group ${WORKING_DIR}/${ADDON_NAME}

# run buildout
sudo -u buildout_user \
    ${PLONE_HOME}/zeocluster/bin/buildout \
    -c ${PLONE_HOME}/zeocluster/${ADDON_NAME}.cfg

# start zeoserver and client
sudo ${PLONE_HOME}/zeocluster/bin/plonectl start zeoserver
sudo ${PLONE_HOME}/zeocluster/bin/plonectl fg client1

@yurj: I'm on Plone 5.2.6 with bobtemplates.plone==5.2.1.

There are two package.json files. None of them contains any scripts:


  "//": "Put here only devDependencies, theme dependencies should stay inside of the theme folder.",
  "name": "my.package",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "~0.4.4",
    "grunt-browser-sync": "^2.2.0",
    "grunt-contrib-less": "latest",
    "grunt-contrib-watch": "latest",
    "grunt-postcss": "^0.8.0",
    "pixrem": "^3.0.2",
    "cssnano": "^3.7.7",
    "autoprefixer": "^6.5.1"


  "//": "Put here only theme dependencies, devDependencies should stay outside of the theme folder in the package root.",
  "name": "my.package",
  "version": "1.0.0",
  "dependencies": {
    "bootstrap": "^3.3.7"
1 Like

can you hit F12 and paste what resources are missing from the browser?

The following resource is not found (RC 404):


Since the created theme is not editable I cannot compile the less files from @@theming-controlpanel.

You can compile them from command line. I don't know why the compiled version is not included, maybe it is compiled at theme activation or addon install? @MrTango

  1. The compiled version is not included
  2. The less files are not compiled neither on theme activation nor on addon install
  3. The generated addon/theme seems not to register any resource

... compile from the command line. Well ... how?

The less-files in theme directory have imports from barceloneta\less which in turn need variables from files in theme. Sorry I get lost.

BTW: What is the purpose of bobtemplates.plone:theme_barceloneta? Which "best practices" do I miss?

You created a new theme package, and the resource need to be compiled. Please take a look at Theme Package I: Preparations – Plone 5 Theming — Plone Training 2022 documentation (since you already have the addon, that should be fine), Theme Package II: Build Your Diazo-Based Theme – Plone 5 Theming — Plone Training 2022 documentation and very important: Theme Package III: Customizations – Plone 5 Theming — Plone Training 2022 documentation.

If you built your addon with bobtemplates.plone, executing grunt (see preparations link on how to install it) in the package root folder should compile all your resources.


Totally forgot about grunt, the readme should be here:

1 Like

@tmassman & @yurj: Thank you very much. That was it.

But ...

  1. grunt compile warns (and avoids compiling) because the expression round((@plone-line-height-computed - 1) / 2) in file theme/barceloneta/less/code.plone.less cannot be evaluated. I added additional parentheses for grunt to compile (see below).
  2. Unfortunately the barceloneta less files do not match with the installed version (Plone 5.2.6).
    Is there any documentation of which version of barceloneta was used? It would be nice to document it in future versions of bobtemplates.plone.

For the sake of completeness I add here the steps that I needed to get it running:

sudo apt-get install -y npm
sudo npm install -g grunt-cli
sudo npm install
sudo npm install
sudo vi \
    +31 \
// in line #31 add additional parenthesis
padding: round(((@plone-line-height-computed - 1) / 2));
// ------------^-------------------------------------^
sudo grunt compile -v -d
1 Like

I think it is the 2.1.2 version of barceloneta

BTW, I think it is real a better option now to use Plone 6.0 which uses the npm package of barceloneta, so you're always aligned.


If you build something new @yurj is right, use the bobtemplates.plone 6.x version which are currently in beta. They will use the npm package of barceloneta and are more up to date.
This error came up earlier too, but it is not fixed in the older versions. I'm happy to review a pull request for the 5.x branch of bobtemplates.plone, so that other people who want to use the older versions which are supporting Python 2.7, don't have the same issues.

Plone Foundation Code of Conduct