Artikel zum Thema CSS

WordPress und Gutenberg per CSS anpassen.

von Kirsten

Den Gutenberg-Editor um eine eigene Farbpalette erweitern

Für einige Gutenberg-Blöcke kann man Farben auswählen, eine Hintergrundfarbe und eine Textfarbe. Diese Farben kann man sich aus einer Farbpalette aussuchen.

In der Standardeinstellung bringt der Gutenberg-Editor eine Farbpalette mit vordefinierten Farben mit. Zusätzlich gibt es noch die Option, eine eigene Farbe auszuwählen: Wenn man auf den Link „individuelle Farbe“ klickt, öffnet sich ein Color-Picker.

Eine individuelle Farbpalette für mein Theme

Die Standardfarben sind einfach irgendwie bunt und passen wahrscheinlich nicht so recht zum Theme. Deshalb bringen gutenberg-kompatible Themes in der Regel ihr eigenes Farbschema mit. Meistens muss man hier nichts machen. Nur wer eigene Themes entwickelt muss selbst Hand anlegen.

Die Farbpalette findet man in der rechten Seitenleiste unter „Farbeinstellungen“.

Weiterlesen Den Gutenberg-Editor um eine eigene Farbpalette erweitern
von Kirsten

Im Gutenberg-Editor mit CSS-Klassen arbeiten

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:

Weiterlesen Im Gutenberg-Editor mit CSS-Klassen arbeiten
von Kirsten

Die Inhalts-Breiten der Gutenberg-Blöcke

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öcke
von Kirsten

Pixel, em und rem – was ist der Unterschied?

Im 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.

Weiterlesen Pixel, em und rem – was ist der Unterschied?

von Kirsten

Eine CSS-Datei ausmisten und überflüssigen Code entfernen

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.

Ausmisten mit Uncss

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:

  1. Gulp und uncss installieren (falls nicht schon vorhanden)
  2. Im Theme-Verzeichnis einen Ordner namens uncss anlegen. Dort landet später die bereinigte CSS-Datei, die uncss erzeugt hat. Das Verzeichnis kann auch anders heissen, der Name wird im gulpfile.js angegeben.
  3. Das gulpfile.js erzeugen (Beispiel s.u.) und in das Verzeichnis legen, in dem man arbeiten will. Also z.B. das Verzeichnis, das das WordPress-Theme enthält.
  4. Per Terminal in dieses Verzeichnis navigieren und gulp tippen – und ab geht die Post.
    Das Ergebnis ist eine verschlankte CSS-Datei im Verzeichnis uncss.

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/'));
});