Gutenberg in Drupal 8 – editor.css und Seven-Verwaltungstheme
Das Verwaltungstheme für Drupal 8 – Seven – ist zwar übersichtlich, aber die Schrift ist vielen Benutzern zu klein. Darum legen wir ein Subtheme von Seven an: sevenchild. sevenchild braucht zunächst nur zwei Dateien:
sevenchild.info.yml
sevenchild.libraries.yml
Dazu kommt die CSS-Datei
css/style.css
In sevenchild.info.yml
name: Sevenchild
type: theme
description: This is a sub theme of Seven
core: 8.x
# Defines the base theme
base theme: seven
# Defines libraries group in which we can add css/js.
libraries:
- sevenchild/global-styling
# Regions
regions:
pre_content: 'Pre-content'
breadcrumb: Breadcrumb
highlighted: Highlighted
help: Help
page_top: 'Page top'
page_bottom: 'Page bottom'
regions_hidden:
- sidebar_first
Und in sevenchild.libraries.yml
global-styling:
css:
component:
css/style.css: {}
Minimales CSS z.B.
body {
font-size: 1em;
background: hsl(50,50%,97%)
}
Eine Hintergrundfarbe, weil die Autoren mit dem zarten Gelb im Hintergrund schneller den Unterschied zwischen Vordergrund und Hintergrund sehen.
Stile für den Gutenberg-Editor
CSS und Script werden in den Gutenberg-Editor mittels library-editor und [theme-name].gutenberg.yml eingebracht. Z.B.:
libraries-edit:
- my-theme/editor
und dann
editor:
css:
theme:
css/editor.css: {}
js:
js/my-theme-script.js