Hallo,
vermutlich bist du angemeldet und schaust dir die Website an.
Wenn man sich die Website nicht angemeldet im Browser oder auf dem Smartphone ansieht, dann sieht das Menü vollkommen ok aus.
Das kannst du z. B. im Inkognito-Modus vom Browser testen.
Allerdings gibt es ein paar Fehler, die du siehst, wenn du in die developer console (Aufruf mit F12) schaust. Darum solltest du dich kümmern.
Viele Grüße
Hans-Gerd
Hallo Hans-Gerd,
ne bin natürlich nicht angemeldet. Vermutlich wird es bei dir nicht angezeigt, weil du den dunklen Modus bei deinem Browser nicht aktiviert hast. So ist das Theme jedenfalls nicht brauchbar für einen Browser mit aktiviertem dunklen Modus.
Die Fehler betreffen überwiegend leider Plugins, worauf ich keinen Einfluss habe.
Viele Grüße
Hallo,
füge bitte die folgende CSS-Regel unter „Zusätzliches CSS“ ein und teste das dann bitte:
span.wp-block-navigation-item__label {
color: black;
}
Wie das funktioniert, habe ich in dem folgenden Beitrag beschrieben.
Viele Grüße
Hans-Gerd
Dann ist die Schrift in der nicht-mobilen Ansicht bzw. Tablet/Querformatansicht schwarz und leider nicht mehr lesbar. Es ist also nichts gewonnen. Habe es wieder gelöscht.
https://bluwingmedia.com/wp-content/uploads/2023/10/Screenshot_20231003_232047_Firefox.jpg
Kann man nicht das Design des mobile Drop-Down-Menüs separat anpassen? Ich war bei dem Theme sowieso etwas verwundert, dass es keine Anpassmöglichkeiten bietet.
Dann müsstest du dafür sorgen, dass über eine Media Query die genannte Schriftfarbe nur mobil geändert wird. Daher sollte die folgende (erweiterte) CSS-Regel funktionieren:
@media (max-width: 768px)
span.wp-block-navigation-item__label {
color: black;
}
}
In der Tat sind die Anpassungen der Navigation insgesamt bei Block Themes wie Twenty Twenty-Three aktuell noch recht beschränkt. Evtl. müsstest du mal schauen, ob es da nicht Plugins gibt, mit denen weitergehende Anpassungen möglich sind, wobei du nicht geschrieben hast, welche Anpassungen du gerne als zusätzliche Optionen hättest.
Nachtrag: Vermutlich ist die folgende CSS-Regel besser:
@media (prefers-color-scheme: dark) {
body {
filter: invert(1);
background: #000; /* since most sites declare the background color */
}
}
Quelle: https://blog.usmanity.com/twenty-twenty-three-theme-from-wordpress-is-the-first-sane-theme-from-wp-in-a-few-years/
Das sollte funktionieren (schwarze Schrift):
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a span {
color: black;
}
Andere Option wäre es, den Hintergrund auf eine dunkle Farbe zu setzen, also so:
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
background: #000;
}
.wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-close {
color: white;
padding: 5px
}
.wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content {
background: transparent;
}
Entweder den ersten oder den zweiten Code testen/einsetzen aber NICHT beide zusammen.
Eigenen CSS-Code kann man (wenn kein Child-Theme vorhanden ist) im WordPress-Backend >> Design >> Customizer >> zusätzliches CSS einfügen.
Abgekürzter Weg -> (https://dein-domainname.de/wp-admin/customize.php), also:
/wp-admin/customize.php an deine Domain anhängen >>, aufrufen und dann auf zusätzliches CSS klicken, das funktioniert auch (noch?), wenn du unter dem Menüpunkt Design kein „Customizer“ mehr findest.
Noch ein Hinweis zum Schluss:
Wir helfen hier bei Anwendungsproblemen, die in Zusammenhang mit WordPress auftauchen. Die Fragen/Probleme sind jedoch bezogen auf CSS, da geben wir hin und wieder mal einen Tipp.
Für weitere CSS-Probleme jedoch solltest du dich selbst näher mit CSS beschäftigen z. B. hier, hier oder hier.
Ergänzend zu diesen Links zum Erlernen von CSS noch ein Link zu einem Hilfe- und Austausch-Forum für (u. a.) CSS -> Forum
