Hallo Rolf,
was du nicht über die Theme-Einstellungen im WordPress-Backend selber einrichten kannst, muss selber hinzugefügt werden und das setzt Grundkenntnisse in HTML, PHP, CSS und JavaScript voraus. Die musst du dir entweder aneignen (eine gute Einführung in CSS findest du z.B. beim Mozilla Developer Network) oder auf solche Einstellungen verzichten. Hier im Forum können wir dir nur Hilfe zur Selbsthilfe anbieten, jeden Teilnehmer unentgeltlich auf Zuruf mit CSS-Regeln zu versorgen sprengt den Rahmen einer freiwilligen Mitarbeit.
Ein wenig Hilfe möchte ich dir trotzdem zukommen lassen: Für solche Änderungen eignen sich die Entwicklertools deines Browsers ganz hervorragend. (Die folgende Beschreibung bezieht sich auf Firefox.)
- Du öffnest deine Webseite in Firefox und machst an einer beliebigen Stelle im Browserfenster einen Rechtsklick. Im Kontextmenü wählst du „Element untersuchen“.
- Im nun geöffneten Fenster mit den Entwicklertools klickst du rechts oben auf das Handy-Icon (bei Mauszeigerkontakt wird „Bildschirmgrößen testen“ angezeigt). Die Webseite sollte jetzt wie auf einem mobilen Endgerät angezeigt werden und du kannst sogar einen Handytyp vorgeben.
- Mit dem Inspektor-Icon (Kästchen mit Pfeil, bei Mauszeigerkontakt mit „ein Element der Seite auswählen“ beschriftet) links oben kannst du das Hamburger-Icon für das Mobil-Menü anklicken. In der linken Spalte der Entwicklertools wird das HTML-Tag
<button class="secondary-toggle" aria-expanded="false" aria-controls="secondary">
angezeigt, darunter ::before
.
- Wenn du auf
::before
klickst, wird in der rechten Spalte die aktuell verwendete CSS-Regel für diesen Button angezeigt:
.site-title a,
.site-description,
.secondary-toggle::before {
color: #ffffff;
}
- Den Farbwert kannst du durch Anklicken des leeren Kreis-Symbols mit einem Farbwähler ändern und das Ergebnis gleich im Browser anschauen. Die neue CSS-Regel, z.B.
.secondary-toggle::before { color: #e00;}
kopierst du in die Zwischenablage (markieren, Strg/Cmd-C). Die Entwicklertools kannst du mit dem Kreuz-Symbol oben rechts schließen.
- Im Customizer fügst du unter Zusätzliches CSS die kopierte CSS-Regel ein und prüfst das Ergebnis. Dann klickst du auf Veröffentlichen. Fertig.
Viel Erfolg.
Thread-Starter
Rolf
(@rolinux)
Vielen Dank. Hat funktioniert.
Gruß
Rolf