WordPress und Gutenberg per CSS anpassen.
Eine relativ einfache Methode, das Aussehen eines Gutenberg-Blocks anzupassen, ist das Arbeiten mit CSS-Klassen.
Bei jedem Gutenberg-Block gibt es die Möglichkeit, eine CSS-Klasse einzutragen. Ich arbeite viel mit solchen Helfer-Klassen. Sie lassen sich gut in die CSS-Systematik eines Projekts integrieren.
Das Feld dafür findest du unter Erweitert/Zusätzliche CSS-Klassen(n).
Hier die CSS-Einstellung für den Absatz-Block:
Gutenberg-Blöcke und damit Gutenberg-Themes wie Twentytwenty verwenden drei verschiedenen Content-Breiten. Eine eher schmale Standard-Breite, die in der Regel den Fließtext enthält, eine „weite Breite“ und eine „volle Breite“.
Da sieht dann etwa so aus:
Der Absatz-Block hat die schmale Breite und bekommt dadurch eine lesefreundliche Zeilenlänge. Die beiden zusätzlichen Breiten gibt es für den Bild-Block, den Cover-Block und verschiedene andere Blocks, z.B. Gallery-Block, Video-Block, Columns-Block oder den Group-Block.
Weiterlesen Die Inhalts-Breiten der Gutenberg-BlöckeIm CSS kann man die Schriftgröße (font-size) in unterschiedlichen Einheiten angeben. Die bekannteste Größe sind Pixel. Aber daneben gibt es auch noch die Einheiten em und rem. Was hat es damit auf sich?
Pixel sind eine absolute Einheit. Das heißt, eine Überschrift, die die font-size 20px hat, hat immer genau diese Größe, nämlich 20 Pixel. Ganz gleich, was um sie herum passiert.
Wie groß eine Überschrift ist, die in 2.5em angegeben ist, kann man erst sagen, wenn man weiß, in welcher Umgebung sie steht. Denn die Einheit em bezieht sich auf den nächsthöheren Container.
Eine CSS-Datei überarbeiten, die in die Jahre gekommen ist, kann mühsam sein. Der erste Schritt ist, herauszufinden, welche CSS-Angaben überhaupt noch aktuell sind.
Wenn ich mir eine CSS-Datei anschaue, die ich vor fünf Jahren geschrieben habe, wird mir anders. Aber das ist ein gutes Zeichen, denn wenn es nicht so wäre, hätte ich in der Zwischenzeit nichts gelernt.
Also tief durchatmen und einmal kräftig entrümpeln.
Es gibt einige Möglichkeiten, über Browser-Extensions oder über die Chrome Developer Tools herauszufinden, welches CSS auf einer Seite gerade nicht verwendet wird. Aber diese Methode taugt nur für einen schnellen, ersten Überblick. Denn anschließend müsste man das überflüssige CSS mühsam per Hand mit der CSS-Datei abgleichen. Kommt dazu, dass man nur das Ergebnisse für die aktuell aufgerufene Seite sieht.
Wir brauchen also ein kluges Script, das in der Lage ist, mehrere Seiten durchzugucken und das ein praxistaugliches Ergebnis in Form einer „bereinigten“ CSS-Datei ausspuckt.
Ein Script, das das sehr gut macht, ist uncss von Giacomo Martino.
Ich habe mich für die Gulp-Variante entschieden. Geht aber auch via Grunt und npm.
Und so geht’s:
gulp tippen – und ab geht die Post.Inhalt gulpfile.js
var gulp = require('gulp');
var uncss = require('gulp-uncss');
gulp.task('default', function() {
return gulp.src([
//Pfad zur CSS-Datei, die entruempelt werden soll
'/Users/kirsten/Sites/my-blog/wp-content/themes/my-blog-theme/style.css',
//hier kann noch ein Pfad hin
])
.pipe(uncss({
//URLs der Seiten, die das Script durchgucken soll
html: [
'http://my-blog.local/',
'http://my-blog.local/category/tipps-und-tricks/',
'http://my-blog.local/some-post/headline/',
'http://http://my-blog.local/category/stories/',
]
}))
.pipe(gulp.dest('uncss/'));
});
Pseudo-Klassen für Links geben den Nutzern wichtige Rückmeldungen beim Navigieren durch eine Seite.
Was a:hover bedeutet, weiss jeder, der mal die Nase an eine CSS-Datei gehalten hat. Die Pseudo-Klassen a:visited, a:focus und a:active sind weit weniger bekannt. Mir war jedenfalls lange nicht klar, was die Angaben genau bewirken.
Über den Selektor a spricht man im CSS einen Link an, mit a:hover lässt sich dem Link ein Effekt mitgeben, der auftritt, sobald die Maus drüberfährt. In Beispiel unten ändert sich die Farbe des Links von Rot in Blau.
a {color: red;}
a:hover {color: blue;}
For the record: Auf Touch-Geräten funktioniert der hover-Effekt nicht.
In manchen CSS-Dateien findet man die Schreibweise a:link {…} anstatt von a {…}.
Die Pseudo-Klasse a:link bezieht sich auf Anchor-Elemente, die ein href-Attribut haben. Was ein bisschen sinnfrei ist, denn dieses Attribut sollte jeder Link haben. Ein Link ist – ein Link und verweist immer auf eine interne oder externe URL.
Wenn nur eine Aktion durch Anklicken ausgelöst werden soll, ist button das Tag der Wahl. Ein Button triggert eine JavaScript-Aktion oder ist Teil eines Formulars.
Wer korrektes HTML pflegt, kann also getrost a statt a:link schreiben.
Weiterlesen Pseudo-Klassen a:visited, a:hover, a:focus und a:active
