Customizing Barceloneta theme

1

I created a custom Plone theme package for Plone 5 according to

http://training.plone.org/5/theming/theme-package.html

and replaced the rules.xml with this one from Asko's blog

For now I only need an additional custom CSS injected into the Barceloneta theme (other modifications might be added by the designer). So my rules.xml is like that

<rules
    xmlns="http://namespaces.plone.org/diazo"
    xmlns:css="http://namespaces.plone.org/diazo/css"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xi="http://www.w3.org/2001/XInclude">

  <!-- Include the backend theme -->
  <xi:include href="++theme++barceloneta/backend.xml" />

  <!-- Only theme front end pages -->
  <rules css:if-content="body.frontend#visual-portal-wrapper">
    <theme href="index.html" />
  </rules>

  <after css:theme-children="html head">
    <link rel="stylesheet" type="text/css" media="screen" href="++resource++plonetheme.omicron/styles.css" />
  </after>

</rules>

The control panel pages appear with the Barceloneta theme and the styles from my styles.css
However the content pages use the bootstrap theme coming from the auto-generated theme boilerplate.

Removing the rule for the visual-portal-wrapper make the content pages appear like that:

https://nimbus.everhelper.me/client/notes/share/398816/pxp58rm722vp8239a7cw

How I get the original Barceloneta look&feel back for the whole site?

-aj

2

For a minimal theme with just re-using Barceloneta, you need three things:

  1. <xi:include href="++theme++barceloneta/rules.xml" /> in your rules.xml
  2. Copy index.html from Barceloneta-theme
  3. Add production-css = ++theme++barceloneta/less/barceloneta-compiled.css into manifest.cfg

Part 1) is clear.

Part 2) is weird. I'd expected <theme href="++theme++barceloneta/index.html" /> to work, but it didn't. Instead it resulted both the index.html from new theme and index.html from barceloneta being applied at the same time.

Part 3) registers CSS for implicit "diazo bundle", which is automatically appended after other resource registry bundles when a theme is enabled.

1 Like
3

Thanks, this worked perfectly.

4

About Part 2) If you dont use an 'Absolute path prefix, href="++theme++barceloneta/index.html" should work.
(then you need to add ++theme+mytheme for (some) references in your theme.

I think the reason for this is that the the url will actually be http://somesite.com/++theme++mytheme/++theme++barceloneta/index.html

2 Likes
5

I tried following the instructions to the letter on Plone 5.2.1 (Py3) but the result produced by new custom TTW theme with just <xi:include href="++theme++barceloneta/rules.xml" /> in rules.xml is not equal to the original, for anon user (Plone main page).

The resulting HTML seems to be somehow different resulting in different styling... the margin from left is gone and the search widget overflows the page on the right. Taking a look at calculated styles shows that the page width is not equal to Barceloneta.

6

A wild guess, taken from memory:

Was there a profile that you need to run if you want to do that (go to portal_setup and see if there is another Barceloneta profile

7

There's a second Barceloneta profile that registers keys for various barceloneta less resources. I tried running that but could see no difference for this use. Perhaps it's useful for more granular re-use of barceloneta less resources?

8

Another (stupid) suggestion:

Could you try to duplicate the theme and use the same (Barceloneta) name?
That would give yo an idea if it has something to do with 'naming'.

Another thing: I think Less changed to Sass in the latest versions(?)

Maybe it is worth googling this probabl, I have a feeling it has been similar problems before… maybe one of these: https://community.plone.org/search?q=include%20href%3D"%2B%2Btheme%2B%2Bbarceloneta%2Frules.xml

9

LESS to SCSS will come in Plone 6, currently available as baceloneta branch we also will change all backend templates of Plone to be bootstrap 4/5 compatible, which makes it easier to use bootstrap based themes with standard Plone.
If you want to create a barceloneta theme you can also use the plonecli with the theme_barceloneta template. This will create a theme which contains the barceloneta sources too and you can customize and reuse what you need of it. In later Plone version you will also have the possibillity to just use barceloneta and add some custom CSS in the theming control panel. Much like the good old custom.css it will override all other CSS if you have to. This way you avoid to have a copy of barceloneta just because you want to do some minor changes.

1 Like
10

btw the upcomming Plone 5.2.2, currently in pending status will most likely already have the custom CSS feature. You can try it out by pointin your development buildout to version:
http://dist.plone.org/release/5.2.2-pending/versions.cfg

and do the upgrade.

11

The custom.css did not override other CSS, it just loaded last.
Usually, that is enough, but there are a few cases where it is not.

Also: There is no way to 'undefine' / remove a definition.
With a lot of themes (not only Plone), there are a lot of definitions that are never used or could be defined 'on a parent', bloating the css.

12

Indeed it does not override CSS by replacing the existing, but one can override CSS definitions with there own. This is a simple way, if you want to change some colors and so on. If you have to customize a lot, it makes more sense to create your own theme and only define CSS you need. But if you are fine with the default theme, just want to change the look a bit, custom css is your friend.

13

this will have no use in Plone 6 anymore, since we are switching to SCSS and using more CSS variables. So you can set your vars in plain CSS or SCSS.

14

Is there any way to test this with a Plone 5.2 installation? I would love to prepare pendect.com to be Plone 6 compatible.

1 Like
15

Structure of the theme is not finished yet and about to change... main focus of the plip/work at the moment is updating the markup.

1 Like
16

The main changes are probably the markup changes towards bootstrap. Most of them you can as overrides right now in the branch of barcelonata and the z3cform package listed above. When we are done with all they will bew replaced in the packages it self. Feel free to join us every wednesday to discuss and sprint on that topic.
09am - 06pm CEST

1 Like