Best practice? What's recommended to include an additional style sheet?

Development Plone 6 UI (Volto)
1

I include my additional style sheet with:

theme/mytheme/extras/custom.overrides:

@import './documentationsidebar.less';

Is this the way to go, or what do you recommend?

1 Like
2

I cloned Barceloneta and added it to a custom package created with plonecli. Then included my changes in ./theme/styles/theme.scss and recompiled.

Sorry, did not notice Volto... This is for Classic.

3

I think your approach is fine.

4

Well, in Plone 6 Classic UI this is no longer the way to go, since Barceloneta is a npm package now. For more read 3. Create a theme based on Barceloneta – Plone 6 Classic UI Theming — Plone Training 2023 documentation

1 Like
5

Ouch, I stand corrected - again. That's twice in as many days :slight_smile: - thanks!

Just took a look, and discovered that in my theme there indded is no Barceloneta, just styles.scss

And... I did look at Grüesibusi back then :wink:

// roboto is not included in this template
// and therefore we disable the setup here.
$enable-roboto-webfont: false !default;

//// VARIABLES
// ... add your variables here

/* testing only, see: https://training.plone.org/5/theming/theme_barceloneta.html#working-with-bootstrap-variables
$pink: #EE4793;
$light-pink: #F3A4CB;
$lighter-pink: #f7d4e5;
$lightest-pink: #fff2f8;
$medium-grey: #999;

$primary: $pink;
$secondary: $light-pink;

$enable-rounded:              true;
$border-radius:               1rem;

$body-bg: $lightest-pink;
$breadcrumb-bg: $lighter-pink;
*/

//// IMPORTS
// Import barceloneta files from node_modules --load-path=node_modules
@import "@plone/plonetheme-barceloneta-base/scss/barceloneta.scss";


//// STYLES
// ... add your styles here

.datagridwidget-table-view {
 font-size: .866rem;
}

td > div > .datagridwidget-table-view {
 font-size: .833rem;
}

/* Resource: ++resource++collective.z3cform.datagridfield/datagridfield.css */
.datagridwidget-table-view {
 border:1px solid darken($plone-light-color, 10%);
 background:none repeat scroll 0 0 #eee;
}

.datagridwidget-table-view .header {
 font-weight:bold;
 background:none repeat scroll 0 0 darken($plone-light-color, 10%);
 color: lighten($plone-dark-color, 10%);
 padding:2px;
 vertical-align: top;
 font-size:.866rem;
 text-align:left;
 border-right: 1px solid darken($plone-light-color, 20%);
}
// etc...