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:
For a minimal theme with just re-using Barceloneta, you need three things:
<xi:include href="++theme++barceloneta/rules.xml" /> in your rules.xml
Copy index.html from Barceloneta-theme
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.
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 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.
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?
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.
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
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.
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.
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