I'm looking at theming in Plone 5 and trying to determine the best way forward for ensuring Plone's HTML output matches that of my custom theme. In this instance, the theme is based on Bootstrap v4 and features all of the framework's components.
In the past, I've tried theming by creating a theme for Diazo/plone.app.theming and creating XSLT rules for Plone's various aspects of HTML output into my theme's framework classes, but this ended up being brittle and hard to handle all aspects of Plone's HTML output. In my past situation, I was applying Bootstrap v2 to Plone 4.x and (eg see example, but it could have been any given framework. The result was a lot of XSLT, much of which ended up being tied directly to the underlying templates, and thus liable to break if (when) HTML output or structure changed. Given nuances in Plone's output HTML between templates, this approach needed in-depth testing and tweaking to handle all edge cases; and for some HTML (eg part of JS or ajax requests and JSON), theming wasn't possible at all without overriding the underlying templates or classes.
Looking at this issue in more depth in Plone 5, the same issue seems to be present; Plone's templates & UI directly depend on the classes/styles provided by plonetheme.barceloneta, and the my theme's framework is opt-in, requiring CSS classes to be applied. To use my theme/framework (uses Bootstrap v4, as mentioned) with Plone, I'd need way of integrating Barceloneta's styles into my theme (or vice versa), but this doesn't appear directly possible because the two themes share conflicting core styles. For instance, having Plone's default CSS present breaks my theme's styles, but removing Plone's CSS breaks Plone's page templates, editor UI, toolbar, etc. Attempting to cut down Barceloneta's LESS (eg remove the generic parts) isn't an option without rewriting it as the Plone UI elements depend on core LESS mixins and styles being present, or else use conflicting class names or style definitions.
So back to my current theming situation -- what's the best solution for getting my Plone site themed using my existing theme, whilst keeping the default Plone templates/UI usable?
Seemingly, the options are either to:
- Change Plone's output to match my theme (eg templates / Diazo and XSLT)
- Change my theme to feature CSS for all of Plone's classes (eg rebuild Barceloneta), and use Diazo/XSLT to translate any conflicting classes
Both options are going to be brittle for any HTML/CSS changes anywhere in Plone and complicated to get right across all aspects of Plone.
Are there any other suggestions or options available? I thought at one point iframes were being considered for the toolbar, which would keep that aspect separate from the rest of the site's theme.
Thanks in advance.