Diazo Theme Customisation

[tmassman (Thomas Massmann #BlackLivesMatter)]

Hi Jesse,

@Netroxen

...and really, the in-line theme editor is just so... What.

This editor is only there to do things TTW, quick and dirty in my opinion. And therefor it's perfectly fine. For more advanced theming I always use the filesystem approach with all the tools I need and like (grunt, less/compass compiler, browsersync, ...; see the new theming training docs for example: https://training.plone.org/5/theming/theme-package.html)

@Netroxen

As I see it you can either use Barceloneta and re-theme the site/application or if you want to create a custom theme and decide to disable Barceloneta then you're thrown in the wild to have to re-style pretty much the entire interface

You can use Barceloneta for backend and your theme for frontend only, see https://training.plone.org/5/theming/theme-package-2.html#unthemed-backend.

@Netroxen

since Barceloneta only uses derivatives of Bootstrap, but not Bootstrap class names or styling, and since most of the Plone templates don't use defaults for classes but custom ids here and there, you basically end up with a broken interface.

I see this as a problem as well and will discuss it at the conference in Barcelona next week.

My themes are almost always Bootstrap based, and usually I do something like this:

    <!-- Add Bootstrap stylesheet. -->
    <before css:theme-children="html head">
      <link rel="stylesheet" href="{$portal_url}/++theme++mytheme/assets/libraries/bootstrap3/css/bootstrap.min.css?v={$theme_version}" type="text/css" />
    </before>

    <!-- Add theme base CSS. -->
    <after css:theme-children="html head">
      <link rel="stylesheet" href="{$portal_url}/++theme++mytheme/assets/css/theme.css?v={$theme_version}" type="text/css" />
    </after>

    <!-- Add selected theme color option from spirit.plone.theming. -->
    <after css:theme-children="html head" css:if-content="#PLONE_THEMING_COLOR_OPTION">
      <link rel="stylesheet" href="{$portal_url}/++theme++mytheme/assets/css/theme-{$color}.css?v={$theme_version}" type="text/css" />
    </after>

    <!-- Add default theme color in case we have no option. -->
    <after css:theme-children="html head" css:if-not-content="#PLONE_THEMING_COLOR_OPTION">
      <link rel="stylesheet" href="{$portal_url}/++theme++mytheme/assets/css/theme-blue.css?v={$theme_version}" type="text/css" />
    </after>

    <after css:theme-children="html body">
      <!-- Bootstrap JS local fallback -->
      <script>if(typeof($.fn.modal) === 'undefined') {document.write(unescape('%3Cscript src="++theme++mytheme/assets/libraries/bootstrap3/js/bootstrap.min.js"%3E%3C/script%3E'))}</script>

      <!-- Add custom JavaScript. -->
      <script src="{$portal_url}/++theme++mytheme/static/main.js?v={$theme_version}"></script>
    </after>

I add the Bootstrap CSS and JS, if not already there, using diazo.

I also use the Plone Theming Extension I wrote some time ago to make it easier for integrators/end users to customize their theme (I think the advanced theming options are too complicated and can break your theme when used wrong).