Begleitende Website zum Kurs Künstler*innen Website gestalten mit WordPress für Kunststudierende, Kunstschaffende und Interessierte.

Zusätzliches CSS

Ein paar Zeilen Code an der richtigen Stelle und schon ist ein Plugin weniger nötig oder Funktionen der Pro-Version (fast) erreicht.

Vorsicht: Code verzeiht keine Fehler. Bevor Du also in files Deiner WordPress-Installation eingreifst, musst Du Dir Deiner Sache sicher sein.

Füge den CSS Code im Website Editor > Stile > 3 Punkte Menü > Zusätzliches CSS ein.

Zusätzliches CSS | Snippets

Tabelle für tabellarischen Lebenslauf

Die Linien der Tabelle lassen sich im Block-Editor entfernen, indem die Ränder auf 0 gestellt werden. Um den Innenabstand zu entfernen, die Schrift an der oberen Kante auszurichten und die erste Spalte schmal zu halten.


/* Tabelle */ 

/* Randlose Tabelle */
.wp-block-table td, .wp-block-table th {
    border: 0;
    padding-top: 0;
    padding-left: 0;
    vertical-align: top;
}

/* Erste Spalte mit fester Breite für Jahreszahlen */
.wp-block-table tr td:first-child {
    width: 80px; /* eine Jahreszahl pro Zeile, sonst mehr px */
}

Navigation | Unterstreichung, Hover und Hervorbeung des aktuellen Menü Items

/* Navigation */

/* Entfernt Unterstreichung bei Hover im Header */
.wp-block-site-title a:where(:not(.wp-element-button)):hover,
.wp-block-navigation a:where(:not(.wp-element-button)):hover {
    text-decoration: none;
}

/* Hover Status Menü Item */
.wp-block-navigation a:where(:not(.wp-element-button)):hover {
    color: #e91e63 !important; /* Eigene Farbe */
    font-weight: 700 !important; /* Eigener Schriftschnitt */
}

/* Aktuelles Menü Item */
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content.wp-block-navigation-item__content {
    color: #00bcd4 !important; /* Eigene Farbe */
    font-weight: 700 !important; /* Eigener Schriftschnitt */
}

CSS für den Inhaltsblock

/* Content <main> */ 

/* Link Unterstreichung mit Abstand */
main p a {     
    border-bottom: 1px solid #51636B; 
}