Broken theme of plone 6 (Creating from scratch)

[Midhexe]

i am following 4. Create a Theme from scratch – Plone 6 Classic UI Theming — Plone Training 2022 documentation the training and the theme is completely broken , is there any way to get the theme .

Available packages:

    plonecli : 2.3

    bobtemplates.plone: 6.2

I have generated the basic theme using the above packages

is there any way to get these styles,

[1letter (Jan)]

Looks like you call 127.0.0.1:8080 ? Test it with localhost:8080 .

[Midhexe]

It's running in localhost:8080

[1letter (Jan)]

Goto the @@theming-controlpanel and check the option "Design" and "Hostnamen without Design"

[santonelli (Stefan Antonelli)]

At which point do you get this screen? I walked through the training quickly to confirm. Everything works as expected.

• In 4.6 you add a Default Plone
• After installing the theme everything looks a bit broken but with some basic styling
• With 4.9 you actually build the styles of you custom theme

Add the following line to your theme.scss to get styling for the toolbar:

@import "@plone/plonetheme-barceloneta-base/scss/_toolbar.scss";

This hint should go to the training docs.

[yurj (Yuri)]

You also need some plone variables for the toolbar:

Toolbar style is broken while creating theme in plone6

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-internall…

EDIT: some variables seems already there in _toolbar.scss, import just the status variables.

[Midhexe]

Thank you !!!

importing the toolbar works! , I got that screen exactly at 4.9 after importing the toolbar it worked well!!