I am following 5. Create a theme based on Diazo – Plone 6 Classic UI Theming — Plone Training 2022 documentation but when I install the addon the toolbar's style is broken any way to fix it?
in the theme scss add:
@import "@plone/plonetheme-barceloneta-base/scss/toolbar";
(close to the end)
and add this close to the begin:
// 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 then do:
npm run build
again.
Add any missing plone variable, you can find them in the node_modules/@plone/plonetheme-barceloneta-base/scss/ directory.
The toolbar has been added as a scss separate component recently and if you don't use barceloneta you should include it.
also the right tutorial should be https://training.plone.org/theming/theme_scratch.html
Also https://training.plone.org/theming/index.html has some useful info.