better isolate toolbar css from rest of the theme

[djay]

Not sure this is the right place, but when we take a outside theme and try to use it with plone we try to eliminate all the plone css and only use it with backend.xml.
However we still need a toolbar and few other things. However the toolbar uses css with very generic selectors such the .icon- selectors.

Everything in the toolbar should have rules that will only ever apply on the toolbar and should be in its own bundle that can be included by itself

[agitator]

aren't those styles in mockup/patterns?

[rafaelbco]

I'm studying how to theme Plone 5 and I think I'll have the same problem. How did you solve it @djay ?

[djay]

We added this feature added to plone that makes it easy.
https://docs.plone.org/adapt-and-extend/theming/barceloneta.html#using-the-barceloneta-theme-only-for-the-backend

[rafaelbco]

I don't quite follow. It seems I still have to include Plone's CSS and JS for the toolbar to work in the "view mode" (i.e not in "backend mode"). Quoting from the page you've mentioned:

You will still need to include a minimal Plone bundle in your theme for rendering the toolbar correctly. It is intended in future versions of Plone that this will be available by default and be very minimal making no assumptions about the JavaScript or CSS of your frontend theme so as not to conflict with it.

I could not find out which CSS and JS resources from Plone I have to include in my theme.

[djay]

@rafaelbco all you have to do is add the code it suggests.

The part of that code that includes the toolbar and css only for pages which are "backend"/CMS pages is

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

The second is the part that loads your custom theme (index.html) but only when its not the backend/CMS pages

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

    <theme href="index.html" />

    <!-- Your diazo front end rules go here -->

    </rules>

[djay]

@rafaelbco maybe it would have been clearer what is really going on if it had been impliment more like this?

<xi:include href="++theme++barceloneta/min-toolbar.xml" />
<rules css:if-content="body.backend">
    <xi:include href="++theme++barceloneta/cmsui.xml" />
</rules>
<rules css:if-content="body.frontend">
    <!-- INSERT YOUR THEME RULES HERE -->
</rules>

[Rudd-O]

Looks like this needs more documentation?

[yurj]

For Plone 6, what I did for a custom theme (not using barceloneta but using bootstrap 5) is to include the toolbar scss from barceloneta in the theme with an import from the npm package:
@import "@plone/plonetheme-barceloneta-base/scss/toolbar";

and to add the related variables from barceloneta:

/ plone variables (used in toolbar)
// Plone specific colors
//colors
$state-draft-color:                 #fab82a!default; // lime-yellow //draft is visible
$state-pending-color:               #e2e721!default; // orange
$state-private-color:               #c4183c!default; // red
$state-internal-color:              #fab82a!default; // is draft
$state-internally-published-color:  #883dfa!default; // is intranet
$plone-link-color:                  #007bb1!default; //plone blue made slightly darker for wcag 2.0
$spacer:                            1rem!default;


// Toolbar
$plone-toolbar-bg: rgba(0, 0, 0, 0.9);
$plone-toolbar-submenu-bg: rgba(20, 20, 20, 0.95);
$plone-toolbar-font-primary: "Roboto Condensed", sans-serif;
$plone-toolbar-font-secondary: "Roboto", sans-serif;
$plone-toolbar-separator-color: rgba(255, 255, 255, 0.17);
$plone-toolbar-link: $plone-link-color;
$plone-toolbar-text-color: rgba(255, 255, 255, 0.9);
$plone-toolbar-submenu-text-color: #fff;
$plone-toolbar-submenu-header-color: lighten(#000, 80%);

$plone-toolbar-locked-color: var(--bs-warning); // is intranet

$plone-toolbar-width: 220px;
$plone-toolbar-width-collapsed: calc($spacer * 2.25);
$plone-toolbar-top-height: calc($spacer * 2.5);

The toolbar uses the toolbar mockup:
https://github.com/plone/mockup/tree/master/src/pat/toolbar

So I think you need just the npm for mockup (but you have it already in the plone javascript) and the scss variables with import as above. Maybe @petschki or @santonelli have all the bits.

P.S: maybe it is better to move to https://community.plone.org/?

[rafaelbco]

@rafaelbco maybe it would have been clearer what is really going on if it had been impliment more like this?

Yes!

[rafaelbco]

The second is the part that loads your custom theme (index.html) but only when its not the backend/CMS pages

But where is the css and js for the toolbar?

[gforcada]

I'm looking into this as well, hopefully some patches will be sent in the next few weeks/months. We are getting a complete design, but we need:

• toolbar
• control panels
• folder_content view
• add/edit forms

So a way to extract these 4 (probably more) parts would be great 🤞🏾 🍀

[petschki]

just wondering what is needed here:

• toolbar, controlpanels and forms are separated scss files in @plone/plonetheme-barceloneta-base/scss/ ... make sure you include the dependend scss definitions.
• folder_contents (aka. pat-structure) gets loaded within the pattern so no need for integrating it somewhere.

[yurj]

In my custom (no barceloneta) what I do is:
@import "@plone/plonetheme-barceloneta-base/scss/toolbar";

then in my theme I copy the variables used in the toolbar:

// plone variables (used in toolbar)
// Plone specific colors
//colors
$state-draft-color:                 #fab82a!default; // lime-yellow //draft is visible
$state-pending-color:               #e2e721!default; // orange
$state-private-color:               #c4183c!default; // red
$state-internal-color:              #fab82a!default; // is draft
$state-internally-published-color:  #883dfa!default; // is intranet
$plone-link-color:                  #007bb1!default; //plone blue made slightly darker for wcag 2.0
$spacer:                            1rem!default;


// Toolbar
$plone-toolbar-bg: rgba(0, 0, 0, 0.9);
$plone-toolbar-submenu-bg: rgba(20, 20, 20, 0.95);
$plone-toolbar-font-primary: "Roboto Condensed", sans-serif;
$plone-toolbar-font-secondary: "Roboto", sans-serif;
$plone-toolbar-separator-color: rgba(255, 255, 255, 0.17);
$plone-toolbar-link: $plone-link-color;
$plone-toolbar-text-color: rgba(255, 255, 255, 0.9);
$plone-toolbar-submenu-text-color: #fff;
$plone-toolbar-submenu-header-color: lighten(#000, 80%);

$plone-toolbar-locked-color: var(--bs-warning); // is intranet

$plone-toolbar-width: 220px;
$plone-toolbar-width-collapsed: calc($spacer * 2.25);
$plone-toolbar-top-height: calc($spacer * 2.5);

and in rules.xml:

 <before css:theme-children="body" css:content="#edit-bar" css:if-not-content=".ajax_load" css:if-content=".userrole-authenticated" />
 <replace css:theme="#anonymous-actions" css:content-children="#portal-personaltools-wrapper" css:if-not-content=".ajax_load" css:if-content=".userrole-anonymous" />

[gforcada]

Cool, thanks!

I'm far from a frontend developer and I even have less knowledge about the ins and outs of barceloneta theme 😅

Would it be worth mentioning it in the Classic UI theming from scratch?

At the end, even if you want to go completely on your own, it does not make much sense to re-style the toolbar, control panels and add/edit forms, so having a quick guide on how to generate a minimal bundle with only these parts (as @yurj shows on his comment) might be really helpful 🎉

[petschki]

absolutely the right place for documenting this usecase 👍🏼

[gforcada]

I made a PR on the documentation for it: plone/documentation#1592 feedback is more than welcome! 😊