Schriftfarbe im Header und Linkfarbe ändern

  • essmo

    (@essmo)


    vor 7 Jahren, 6 Monaten

    Hallo,

    ich nutze das Theme Button und würde gerne Schriftfarben ändern: Zum einen die Schriftfarbe im Header und dann die Farbe der Links. Beides ist momentan noch orange (war die Standardeinstellung) und ich würde sie gerne auf grün ändern (#098249). Bei den Links gerne erst das dunkelgrün #098249 (vor dem Klick) und danach ein helleres grün #67d377 (nach dem Klick). Im Customizer könnte ich theoretisch zumindest die Headerfarbe ändern, aber das funktioniert irgendwie nicht, da es meine Änderungen für die Schriftfarbe nicht abspeichert. Was kann ich also tun?

    Wenn ich in den Editor rein muss, wäre mir eine detaillierte Erklärung einschließlich eines Code-Beispiels lieb, da ich mit meinen Programmiererkenntnissen wirklich erst ganz, ganz, ganz am Anfang stehe.

    Vielen Dank schon mal für die Hilfe. Ich hab noch mehr Fragen, aber ich fange erstmal mit einer an. 🙂 Also, danke und viele Grüße

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)
  • Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 7 Jahren, 6 Monaten

    Dass du die Farbe des Titels nicht ändern kannst, ist ein Programmierfehler im Theme. Die Farbe wird nur für die CSS-Klasse .site-title a, nicht aber für .site-title a:visited geändert. Deshalb „funktioniert das irgendwie nicht“.

    Um Farben nach eigenen Wünschen anzupassen, benötigst du erst einmal den CSS-Selektor und die zugehörige CSS-Regel, mit der die Farbe festgelegt wird. Das lässt sich am einfachsten mit den Entwickler-Tools deines Browsers feststellen: Mit Rechtsklick auf die Überschrift > (Element) untersuchen öffnet sich ein neuer Abschnitt im Browser, in dem du im Tab „Inspect“ bzw. „Elements“ links das HTML und rechts die zugehörigen CSS-Regeln siehst. Für die Überschrift lautet die CSS-Regel 

    .site-title a, .site-title a:visited {
    color: #f78769;
    text-decoration: none;
}

    wobei du nur die Farbe ändern möchtest. Dazu gehst du im Customizer in Zusätzliches CSS und trägst dort (bitte außerhalb des /* Kommentars */ folgendes ein

    .site-title a, .site-title a:visited {
    color: #098249;
}

    Die Schritte wiederholst du für Links: Rechtsklick auf einen Link > Element untersuchen > in den Entwickler-Tools nach CSS-Regeln suchen. In den Entwickler-Tools kannst du nun verschiedene CSS-Regeln einfach ausprobieren, in dem du rechts oben auf das +-Zeichen klickst. Trägst du nun a { color: #098249; } ein, siehst du, dass zwar der Link in einer Seite oder in einem Beitrag grün markiert wird, aber leider auch alle anderen Links, z.B. in der Sidebar. Um das weiter einzuschränken, musst du zusätzlich einen Selektor für den Bereich eingeben, also z.B..entry-content a { color: #098249; }.

    Jetzt fehlt nur noch eine Regel für die Anzeige bei Mauszeigerkontakt (:hover). Um das in den Entwickler-Tools zu simulieren, gibt es rechts oben ein Auswahlfeld – bei Chrome ist das :hov, bei Firefox ein Icon. Ich hab mal einen Screenshot gemacht, damit das etwas übersichtlicher ist:

    Screenshot Entwicklertools

    Komplett ergeben sich dann also z.B. folgende CSS-Regel, die du im Customizer einträgst:

    .site-title a, .site-title a:visited {
    color: #098249;
}
.entry-content a { 
    color: #098249; 
}

/* bei Mauszeigerkontakt */
.entry-content a:hover {
    color: #67d377;
}

    Wenn du mehr über CSS erfahren möchtest, findest du im Mozilla Developer Network eine gute Einführung.

    Nachtrag: der Programmierfehler wurde schon mal reklamiert und sollte angeblich behoben sein. Ich hab gerade nochmal darauf aufmerksam gemacht.

    • Diese Antwort wurde geändert vor 7 Jahren, 6 Monaten von Bego Mario Garde. Grund: Nachtrag
    • Diese Antwort wurde vor 7 Jahren, 6 Monaten von Bego Mario Garde geändert.
    • Diese Antwort wurde vor 7 Jahren, 6 Monaten von Bego Mario Garde geändert.
    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 7 Jahren, 6 Monaten

    Ganz vergessen: Der eingebaute Editor sollte nur in Ausnahmefällen verwendet werden. Die Gefahr, dass du dich durch einen Programmierfehler aussperrst, ist im Moment noch zu hoch (in der kommenden WordPress-Version gibt es hier Verbesserungen). Außerdem werden Änderungen, die du im Theme vornimmst, bei der nächsten Aktualisierung überschrieben. Die Anpassungen im Customizer bleiben hingegen bestehen. Deshalb: besser wie oben beschrieben den Customizer nutzen.

    Thread-Starter essmo

    (@essmo)

    vor 7 Jahren, 6 Monaten

    Vielen, vielen Dank für die schnelle Antwort und die gute Erklärung.
    Die Überschrift im Header und in Links habe ich geändert bekommen. Ich hätte gerne alle Verlinkungen, die momentan noch orange sind, grün. Also auch die Klicks zu den einzelnen Archivmonaten, die anderen Links in der Spalte auf der rechten Seite und die Weiterlesen-Links. Wie kann ich das ändern?
    Mit den zusätzlichen CSS im Customizer bin ich gut klar gekommen. Die Sachen aus dem Screenshot habe ich nicht gefunden, das sieht bei mir ganz anders aus (oder ich habe es eben nicht gefunden).
    Für nochmal einen Hinweis, was ich bei den zusätzlichen CSS im Customizer eintragen kann, damit auch die anderen Links grün werden, wäre ich sehr dankbar.
    Vielen, vielen Dank!!!

    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 7 Jahren, 6 Monaten

    a, a:hover, a:focus, a:active, a.more-link, .entry-meta a, .entry-meta a:visited, .entry-footer a, .entry-footer a:visited {
    color: #098249;
}

    … allerdings heben sich die Links dann noch weniger vom Text ab. Barrierefrei ist das dann sowieso nicht mehr.

    Thread-Starter essmo

    (@essmo)

    vor 7 Jahren, 6 Monaten

    Hallo,
    na, das sieht doch schon ganz gut aus. 🙂

    Jetzt fehlt nur noch, dass alle anderen Links aus deinem zweiten Post bei Mauszeigerkontakt hellgrün (#67d377) werden (einschließlich der Menüleiste). Momentan ist das alles noch orange. Und nach dem Anklicken bleiben die Links orange. Da wäre mir das dunkelgrün lieber (oder eben das hellgrün einheitlich für alle Links, auch der im Text).

    Momentan steht das alles bei mir in den zusätzlichen CSS drinne:

    .site-title a, .site-title a:visited {
    color: #098249;
    }
    .entry-content a {
    color: #098249;
    }

    /* bei Mauszeigerkontakt */
    .entry-content a:hover {
    color: #67d377;
    }

    a, a:hover, a:focus, a:active, a.more-link, .entry-meta a, .entry-meta a:visited, .entry-footer a, .entry-footer a:visited {
    color: #098249;
    }

    Wegen dem Grünton kann ich ja nochmal gucken und beide Grüntöne insgesamt noch etwas heller machen. Dann wird das Ganze auch barrierefreier. 🙂

    Also, danke und viele Grüße,
    Dorothea

    Thread-Starter essmo

    (@essmo)

    vor 7 Jahren, 6 Monaten

    P.S.: Und das „Ältere/Neuere Beiträge“ ganz unten auf der Seite scheint auch noch orange zu sein (ich glaube zumindest, dass ich es noch nicht angeklickt habe und es mir deshalb orange angezeigt wird).

    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 7 Jahren, 6 Monaten

    Gib einem Menschen einen Fisch und du ernährst ihn für einen Tag. Lehre einen Menschen zu fischen und du ernährst ihn für sein Leben.

    Ich hatte dir doch oben beschrieben, wie du vorgehst: Entwickler-Tools im Browser öffnen, CSS-Selektor raussuchen, neue CSS-Regel testen, kopieren und im Customizer einfügen. Du hast eine Website, du bist dafür verantwortlich, du kannst das. 🙂

    Barrierefrei heißt übrigens nicht nur, dass ausreichende Kontraste verwendet werden. Dazu gehört auch, dass Links unterstrichen werden, auf target="_blank" verzichtet wird, usw.

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)
  • Das Thema „Schriftfarbe im Header und Linkfarbe ändern“ ist für neue Antworten geschlossen.

Schlagwörter