A step by step guide for creating a new add on with a subtheme theme_barceloneta and theme development

Plone Support Theming
1

Hi!

what I've found:

  • Create the addon with the theme
# venv python3
mkdir plonecli
python3 -m venv plonecli
cd plonecli
# activate venv
source bin/activate
# update pip to avoid errors
python -m pip install -U pip
# optional?
pip install wheel
# install plonecli
pip install plonecli

# create addon
mkdir src
plonecli create addon src/myaddontheme

# add theme
cd src/myaddontheme/
plonecli add theme_barceloneta
deactivate
  • Add the addon to the plone instance

cd <path to my plone instance>
cd src

Add:

extensions =
mr.developer

in [buildout] section of buildout.cfg

Add:

myaddontheme

to eggs section of buildout.cfg

and then add:

auto-checkout +=
myaddontheme

just before the parts section of buildout.cfg

Finally:

./bin/buildout -Nv

  • Theme development

from DEVELOP_THEME_BARCELONETA.rst in the theme directory:

cd <path to my plone instance>
cd src/myaddontheme
npm install
cd src/myaddontheme/theme
npm install
grunt watch

Some questions:

1 - how can I install the addon in an existing plone instance?
2 - compiling the less, I get:

Aborted due to warnings.
Completed in 1.001s at Sat Apr 24 2021 19:47:37 GMT+0200 (GMT+02:00) - Waiting...
>> File "less/custom.less" changed.
Running "less:dist" (less) task
>> barceloneta/less/code.plone.less: [L31:C11] Error evaluating function `round`: argument must be a number
Warning: Error compiling less/theme.local.less Use --force to continue.

the error is on the line:

padding: round((@plone-line-height-computed - 1) / 2);

Thanks for any info!

2

putting something fixed instead of:

padding: round((@plone-line-height-computed - 1) / 2);

for example:

padding: 3px;

make it work, I can change (in my src/mytheme) theme/barceloneta/barceloneta/less/variables.plone.less and see changes.

compiling directly with --math=always works:

lessc --math=always less/theme.local.less

/* theme.less file that will be compiled */
@font-face {
font-family: 'Roboto';
src: url('/++theme++cabtheme/barceloneta/less/roboto/roboto-light.eot');
[...]

but I don't know how to pass it to grunt watch task. The problem happen with lessc 3.X and 4.X

Are you able to compile less with this rule?

3

I've found this way:

mkdir src
create the package (or move it) in src/ with plonecli

add

extensions =
    mr.developer

in the [buildout] section of to buildout.cfg

and

auto-checkout +=
mypackage

before the parts section in buildout.cfg

and

[sources]
mypackage = fs mypackage path=src

at the bottom of buildout.cfg

This is because plonecli creates a setup.py in the root of the package and not in the mypackage namespace, then it address the source in the subdir src and [sources] get from it.

I got directions from
https://training.plone.org/5/mastering-plone/eggs1.html

Note: ok for developing but how then we can package it avoiding the src dir?

4

Note that the theme was changed from less to sass quite some time ago (more than a year, ago, if I remember right)

5

Isn't for Plone 6? bobtemplates.plone has the less version, anyway. So what is the best practice here?

6

Anyway, I tested it (mr.developer in src from git) in Plone 5.2 and even if scss is compiled, the site miss some style. Anyway, the toolbar works (I see no difference with the other bar). Maybe I miss some import step o setup?

7

This is not supposed to work. The master branch targets Plone 6 and the new Bootstrap 5 based UI.

8

When I develop themes, I usually just run everything from the theme itself.

So basically, I do

  1. cd my.theme
  2. bin/buildout; bin/instance fg and run grunt from there

Maybe you need to run

virtualenv --clear .
 ./bin/pip install setuptools==40.2.0  zc.buildout==2.12.2

first.
(not sure about the versions)

9

Yes, @agitator explained me that the markup has quite changed. Any idea on the "round" problem in compiling less?

@espenmn when you end the develop, how do you install it in the production site? mr.developer checkouts in src?

For bootstrapping the project, the DEVELOP.rst contains:

$ virtualenv --clear .

Install requirements with pip::

$ ./bin/pip install -r requirements.txt

and requirements.txt points to https://dist.plone.org/release/5.2-latest/requirements.txt

setuptools==42.0.2
zc.buildout==2.13.3
wheel

windows specific down here (has to be installed here, fails in buildout)
#Dependency of zope.sendmail:
pywin32 ; platform_system == 'Windows'
ssl Certs on Windows, because Python is missing them otherwise:
certifi ; platform_system == 'Windows'
#Dependency of collective.recipe.omelette:
ntfsutils ; platform_system == 'Windows' and python_version < '3.0'

10

If you want to, but you might as well do it manually.

  1. Put the theme in /src folder (or wherever you want it)
  2. Add src = /src/my.theme
  3. run buildout

For 1) you can cd /src and git clone/checkout the theme. I never want the theme to update unless I do it on purpose: so I never use auto checkout. I just git pull from the my.theme folder

2 Likes
11

Yes the easy way is to use the selfcontained buildout of the created package.
That helps to keep the development of different packages clean and separate.
And to use the package in a project buildout, together with other packages, do what @espenmn said and add in to the develop part or use mr.developer to manager the checkout. Booth ways are used often.

regarding the round error, it might be that the variable is not set or found correctly.
There where some changes in some external resources from CMFPlone with are now in plone.staticresources. But not all of them ended up there, i think.
But you can always fix that by defining something your self and ignore the defaults from plone.

1 Like
12

Hi!

The variable is set and is used correctly the line below:

padding: round((@plone-line-height-computed - 1) / 2);
margin: 0 0 (@plone-line-height-computed / 2);

plone-line-height-computed is defined in theme/less/variables.plone.less

@plone-line-height-computed: floor((@plone-font-size-base * @plone-line-height-base)); // ~20px

The fix was to set the padding above hardcoded to 10px or compile less command line with the --math=always switch:

lessc --math=always less/theme.local.less

but it was a very strange error, so I asked.

Thanks for the info for best practice.

13

I've found this is the right way to do it:

padding: round(((@plone-line-height-computed - 1) / 2));

The problem:
less need parenthesis for every math operation if there are variables. So:

padding: round((@plone-line-height-computed / 2));

works too. To do the subtraction, you've to add another parenthesis as above.

@agitator

1 Like