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

Plone Support Add-on Development
1

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:

PLONE_HOME=/home/Plone-5.2.6
WORKING_DIR=/home/Plone-5.2.6/zeocluster/src
ADDON_PACKAGE=my
ADDON_SUBPACKAGE=package
ADDON_NAME=${ADDON_PACKAGE}.${ADDON_SUBPACKAGE}

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

# create addon
cat <<EOF \
    | sudo tee ${WORKING_DIR}/${ADDON_NAME}_bobtemplates.plone.addon.ini
[variables]
author.name = theAuthor
author.email = mail@domain.com
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
EOF

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

# create barceloneta_theme
cd ${WORKING_DIR}/${ADDON_NAME}

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

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

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

# 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
3

@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:

./my.package/package.json

{
  "//": "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"
  }
}

./my.package/src/my/package/theme/package.json

{
  "//": "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
4

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

5

The following resource is not found (RC 404):

http://.../Plone//++theme++my-theme/less/theme-compiled.css

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

6

https://docs.plone.org/adapt-and-extend/theming/resourceregistry.html#bundles-compiling-bundles

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

7
  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?

8

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.

2 Likes
9

Totally forgot about grunt, the readme should be here:

https://github.com/plone/bobtemplates.plone/blob/5.x/bobtemplates/plone/theme_barceloneta/DEVELOP_THEME_BARCELONETA.rst.bob

1 Like
10

@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

cd ${WORKING_DIR}/${ADDON_NAME}
sudo npm install
cd ${WORKING_DIR}/${ADDON_NAME}/src/${ADDON_PACKAGE}.${ADDON_SUBPACKAGE}/theme
sudo npm install

sudo vi \
    +31 \
    ${WORKING_DIR}/${ADDON_NAME}/src/${ADDON_PACKAGE}.${ADDON_SUBPACKAGE}/theme/barceloneta/less/code.plone.less

// in line #31 add additional parenthesis
padding: round(((@plone-line-height-computed - 1) / 2));
// ------------^-------------------------------------^

sudo grunt compile -v -d
1 Like
11

https://community.plone.org/t/a-step-by-step-guide-for-creating-a-new-add-on-with-a-subtheme-theme-barceloneta-and-theme-development/13758

I think it is the 2.1.2 version of barceloneta

https://github.com/plone/bobtemplates.plone/issues/460

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.

2 Likes
12

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.