Kategorien
Web und virtuelles

Neues Design für die Website – Twenty Twenty

Auch wenn es nicht so aussieht, hier auf meiner Website tut sich gerade einiges. Zwar eher im Hintergrund, dafür aber an Grundlagen die auch nötig sind um alles abzurunden.

Mir fehlt momentan einfach die Zeit mehr Beiträge zu schreiben, auch wenn ich wirklich Lust dazu habe. Mit 2 Zwergen die gerade ständig zuhause sind, einem jetzt online stattfindenden Studium und der Selbstständigkeit ist meine Zeit doch schon ganz ok gefüllt.

Trotzdessen hat sich hier in letzter Zeit einiges geändert. Ganz vorn dabei natürlich das Design der Website. Hier setze ich jetzt auf das, für mich angepasst, Twenty Twenty Theme.

Twenty Twenty Theme Anpassungen

Ich bin schon immer ein großer Fan der WordPress Standard Themes, so auch dieses mal vom Twenty Twenty Theme.

Nachdem ich von Twenty Fifteen auf das Theme von Rich Tabor, Tabor gewechselt hatte ist das jetzt mein Schritt wieder zurück zu einem Standard Theme. Denn nach dem Verkauf von Themebeans hat sich leider bei den alten Themes von Rich nichts mehr getan. Was gerade in der aktuellen Block-Editor-Zeit (Gutenberg) sehr schade ist. Denn dieser Block-Editor ändert doch Grundlegend wie wir mit WordPress umgehen und wie WordPress unsere Inhalte über die Themes ausliefert.

Ich bin ein großer Freund alles so Core nah (WordPress Standard Funktionen) wie möglich zu belassen. Denn diese Funktionen werden es mir immer erlauben das Theme einfach mal so zu wechseln ohne extrem viel nacharbeiten zu müssen. Und ich bin auch ein großer Freund davon immer mal wieder das Theme zu wechseln 🤪 da möchte ich mir natürlich etwas Zeit sparen.

Aber so komplett Out-of-the-Box nutze ich dann doch keines der Themes, dass wäre mir einfach zu langweilig. Zum Glück gibt es die Möglichkeit per Child-Theme Änderungen Update-sicher zu hinterlegen.

Dark Mode für das Twenty Twenty Theme

So habe ich den Theme einen Dark Mode spendiert welchen ich bei Tabor schon sehr geschätzt habe.

Gelöst habe ich den Dark Mode über das CSS Media Querie prefers-color-scheme. Sobald das Betriebssystem dem Browser sagt das es im Dark Mode ist schaut auch dieser ob es spezielle Anweisungen dafür gibt.

@media (prefers-color-scheme: dark) {
	...
}

Also alles was zwischen diesem Media Querie steht wird nur dann ausgeführt wenn sich das Betriebssystem im Dark Mode befindet. Der Vorteil daran ist, dass du dich als Besucher nicht darum kümmern musst etwas umzuschalten. Es funktioniert einfach so. Ein Nachteil ist, es wird nur über die Betriebssystem Funktion gesteuert. Wenn dein System das nicht kann funktioniert es ebenfalls nicht.

Natürlich wäre es möglich das ganze auch über eine JavaScript Funktion zu realisieren, aktuell spare ich gern etwas Code beim Thema JavaScript 😅

Schriftarten und Farben

Persönlich mag ich die serifenlose Schriftarten einfach mehr. Auch wenn viele Statistiken zeigen das die Lesbarkeit mit serifen besser ist, muss ich es hier einfach für mich anpassen. 🤷🏻‍♂️ Die Serifen-Schriftart im Fließtext habe ich dann einfach mit der serifenlosen ersetzt.

.entry-content,
.entry-content p,
.entry-content ol,
.entry-content ul,
.entry-content dl,
.entry-content dt,
.entry-content cite,
.entry-content figcaption,
.entry-content .wp-caption-text,
.widget_text p, 
.widget_text ol, 
.widget_text ul, 
.widget_text dl, 
.widget_text dt, 
.widget-content .rssSummary {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
	letter-spacing: normal;
}

@supports ( font-variation-settings: normal ) {
	
	.entry-content,
	.entry-content p,
	.entry-content ol,
	.entry-content ul,
	.entry-content dl,
	.entry-content dt,
	.entry-content cite,
	.entry-content figcaption,
	.entry-content .wp-caption-text,
	.widget_text p, 
	.widget_text ol, 
	.widget_text ul, 
	.widget_text dl, 
	.widget_text dt, 
	.widget-content .rssSummary {
		font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
	}
}

Das Twenty Twenty Theme beitet über den Customizer die Möglichkeit an eine Akzentfarbe zu hinterlegen. Die Farbauswahl ist hier durch den Fokus von a11y (accessibility -> Barrierefreiheit) etwas eingeschränkt möglich.

Leider werden auch viele Teile des Themes mit dieser Farbe eingefärbt die ich gern unabhängig geändert hätte. Da dieses Theme für sehr viele Situationen passen soll, verstehe ich zwar die herangehensweise, mag dann aber doch lieber mehr Einstellmöglichkeiten. Da es diese aber nicht gibt blieb mir nur alles per CSS anzupassen.

Je mehr ich über CSS verändere desto mehr liebe ich die vielen neuen Möglichkeiten die CSS immer mächtiger machen.

Twenty Twenty Child Theme bei GitHub

Ich habe hier zwar schon an ein paar Beispiel Änderungen gezeigt aber das ist nicht alles. Ebenfalls fände ich es recht langweilig hier den kompletten Code einfach Online zustellen. Es ändert sich auch ständig wieder etwas und das hier wäre nicht mehr auf dem aktuellesten Stand.

Da ich ich mich gerade dran mache Git zu lernen/verstehen habe ich mein Child Theme für das Twenty Twenty Theme einfach bei GitHub eingestellt. Wenn du also Interesse hast schau es dir gern einmal genau an.

Wie immer ist so ein Projekt natürlich nie abgeschlossen, so auch hier. Denn ich möchte gern das CSS noch über SASS/SCSS realisieren und mich auch dadurch gleich weiterbilden.


Sag du mir doch gern einmal in den Kommentaren was du von meinen Anpassungen hälst. Vielleicht bringst du mich ja auch auf eine Idee die ich als nächstes Umsetzen kann 😉

4 Antworten auf „Neues Design für die Website – Twenty Twenty“

Danke für das Child Theme!

Ich nehme gerade den dritten Anlauf, um eine WordPress-Seite aufzusetzen (lange Geschichte) und verwende für meine Dummy-Site das Twenty Twenty Theme. Dessen Farbgebung ist zwar nicht nach meinem Geschmack, aber da ich nicht vorhabe, den Dummy mit unveränderter Optik zu veröffentlichen, war’s mir egal. Doch da deine Farbgebung und Typografie ganz nach meinem Geschmack sind, war ich hocherfreut, dass ich einfach nur ein fertige Child Theme auf meine Website hochladen musste, um diese Einstellungen zu übernehmen. Zumal ich sowieso ein Child Theme brauche, um diverse Anpassungen vornehmen zu können.

Einen – klitzekleinen – Wermutstropfen hat dein Child Theme aber: In der Advanced Gallery des Kadence Blocks-Plugin werden die Navigations-Punkte im Carousel-Modus Schwarz auf Dunkelgrau dargestellt. Dafür funktioniert die Dark-Mode-Automatik unter Ubuntu 18.04 ohne Beanstandungen.

Hallo,
vielen Dank für Deine Einblicke.
Mich hätte im Deltail noch mehr interessiert wie ich die Schriften, Formatierungen finde und diese ersetzen oder verändern kann.

Ich habe Deinen Schriftarten- Code einfach unten angefügt in meiner style.css ist aber bestimmt nicht ganz ok so…

Was mich noch interessiert wie ich in, am besten in egal welchem Theme, die Autoren, Zeit und Schlagworte unsichtbar machen kann…
Es gibt zwar Infos im Netzt jedoch funktionieren diese nicht zuverlässig.

Schöne Grüße

Du findest in jedem Browser die sogenannten Entwicklertools. Damit kannst du dir den Quelltext anschauen, aber auch jedes Styling (CSS) eines einzelnen Elements anschauen.

Eine pauschale Aussage wie du die einzelnen Elemente ausblenden kannst kann ich dir nicht geben, da hier jedes Themes etwas anders machen kann. Ausserdem ist ein ausblenden über CSS keine feine Lösung, hier solltest du innerhalb des Child-Themes dann etwas mehr Anpassungen innerhalb der einzelnen Bausteine machen 😉

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.