This is something I have had difficulty understanding, because at the moment Barceloneta is the default theme for Plone - however the whole styling stack makes use of but overrides a bunch of default Bootstrap styling elements. It's like a Frankenstein version of the aforementioned framework. Using Diazo is great, but implementing the front-end theme with the back-end control panel is a nightmare and has you digging around in rules and conditions where it should be much simpler to do. If I want to to separate the the back-end styling with the front-end stuff, things break.
Then to top the cherry on the pie is the implementation of various rows, containers and columns in templates which when rendered all together using macros, rules and TAL just ends up in a mosh-pit of confused Bootstrap elements in no logical hierarchy...
There are a few themes that were created for Plone at GSoC and they all inherit the same problems and broken responsiveness as a result of this.
Much better in my opinion would be to use a default Bootstrap layout and styling with some CMS independent styling which can be easily removed and overridden and then keep only the toolbar and configuration panel the same, much like in Drupal from what I've seen.
What are other peoples opinions on this and what is everyones workflow for totally customizing a Plone visual experience for a web application. How would you implement the back-end into the front-end theming of Diazo. I had real problems with this, does someone have some examples..?
I just had a discussion with @MrTango about this yesterday I have the same "problem" with how Barceloneta works with Bootstrap. What I usually do when theming for Plone is to separate front end and backend:
<?xml version="1.0" encoding="UTF-8"?>
<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 my.theme for front end theming. -->
<rules css:if-content="body.viewpermission-view, body.viewpermission-none">
<!-- Use the theme template from index.html. -->
<theme href="index.html" />
<notheme css:if-not-content="#visual-portal-wrapper" />
<!-- Add your front end rules here. -->
<xi:include href="++theme++my.theme/rules/core.xml" />
</rules>
<!-- Include barceloneta's backend.xml for backend theming. -->
<rules css:if-not-content="body.viewpermission-view, body.viewpermission-none">
<xi:include href="++theme++barceloneta/backend.xml"><xi:fallback /></xi:include>
</rules>
</rules>
This way the (public) front end is styled with your theme, and as soon as you enter site setup, folder contents or edit views, barceloneta is used. As you can see it is all done with view permission checks, so you can adjust it to your needs.
I basically base all my themes on barceloneta, to me it's still the easiest way if you ned frontend and backend styled the same way.
About integrating other bootstrap components, mapping plone-specific variables to Bootstrap really feels kind of "Frankenstein"
Some more Bootstrap components were added over the last months (dropdown and collapsibles for example) but generic styles for them are either missing or defined for those specific usecases like patterns.
But this is what I hate, because what kind of user experience is offered when you have one theme on the front-end and another on the back-end, that's all fair and well. But they should work in unison and have a way of implementing each-other easily.
...and yes Barceloneta is nice and fills its purpose, but it definitely doesn't compete with the polished look of WordPress or the flexibility of a Django interface.
The theming is too tightly entwined with the logic and functionality of Plone, it should be generalized and separated out in my opinion.
I don't have experience with both of them, can you maybe point to some specific docs/examples/information on how it's done or look like with WP/Django?
I speak figuratively, since I've seen the interfaces as far as how they look. So not specifically. Can you show me some examples of implementing the back-end with front-end theme? I have real problems with that.
It's great you are providing feedback. Thanks for that. It would be even better if you could give more specifics because its a bit hard to understand what issues you are having.
Is it that you are trying to theme both the backend and front end with the same theme? ie the opposite of what @tmassman suggested? ie you want the control panel and edit pages etc to be themed the same as your home page?
This is not so easy to do unfortunately, or rather it takes some work. Also lots is done via js now like "contents" which makes it very hard to theme. This is a shame but I think its pragmatic since most sites are fine with a generic backend and I believe wordpress works the same way.
But perhaps you were meaning something else?
Albert made SCSS branch for Barceloneta into plonetheme.barceloneta at the last Barcelona sprint. So, I'm using a git checkout (with npm/yarn) from that. I've not synched it with the less files for some time, so it might be missing some of the recent changes. I'm doing import within webpack build, so I can define and use aliases for import (and webpack finds those files from the filesystem).
I switched to SCSS because of BS4 is also in SCSS. I did use LESS version in the beginning, so it should work as well. I believe that almost any component of Barceloneta can be used individually when the required variables are defined.
I have the same "problem" with how Barceloneta works with Bootstrap. What I usually do when theming for Plone is to separate front end and backend: