Beste Möglichkeit, das Formatierungstext von Linktext anzupassen?

Entwickler
1

Was ist der beste Weg, die Formatierung des Linktextes anzupassen? Es scheint, als wäre die Bearbeitung des CSS nicht der optimale Ansatz, da die Änderungen beim Aktualisieren des Plugins verloren gehen.

40
401738×632 42.5 KB

Ich möchte den Text fett machen und die Textfarbe an das Theme der Website anpassen, damit er besser integriert wirkt.

Derzeit sieht der Link so aus –

03
03778×104 16.7 KB

und ich möchte, dass er so aussieht –

39
39802×114 16.2 KB

Es wäre hilfreich, den Text je nach Theme anpassen zu können. Ich habe ein Dark-Theme und ein Light-Theme mit jeweils unterschiedlichen Schriftfarben. Ich möchte die Textfarbe so einstellen, dass sie zum Theme passt.

2

Du musst eine neue Theme-Komponente mit deinen Änderungen erstellen und diese dann in dasselbe Haupttheme einfügen, in dem sich die „Custom Header Links" befinden.

3

Danke! Ich habe das jetzt erledigt, und es hat perfekt funktioniert.

Aus Interesse: Wie wählt die Seite aus, welches CSS verwendet wird? Wenn die Standardthemenkomponente CSS enthält, das die Schriftfarbe auf $header_primary setzt –

.headerLink {
  list-style: none;
  a {
    padding: 6px 10px;
    color: $header_primary;
    font-size: $font-up-1;
  }
}

– wie weiß sie dann, dass sie stattdessen das CSS aus meiner neuen Komponente verwenden soll?

.headerLink {
  list-style: none;
  a {
    color: #7A7A7A;
  }
}
4

Hallo @Johani – ist das immer noch der Fall? Meine Instanz scheint sich widerstrebend zu verhalten, wenn es darum geht, die $header_primary-Farbe zu übernehmen, und seltsamerweise bleibt sie stur schwarz, selbst wenn ich $primary auf die gewünschte Farbe (weiß) setze :upside_down_face: !

Screenshot 2021-02-06 at 14.16.12

5

Es liegt wahrscheinlich am Wechsel von SCSS zu CSS-Variablen für Farbdarstellungen. Die Zuweisung von $header_primary in benutzerdefiniertem CSS funktioniert nicht, aber wenn du folgenden Code verwendest:

.custom-header-links .headerLink a {
    color: var(--header_primary);
}

wird die Farbe korrekt übernommen.

6

Diese Lösung hat bei mir nicht funktioniert. Fügen Sie das im benutzerdefinierten CSS des Themes hinzu?

7

Ja, genau das war es. Die Komponente nutzt jetzt die benutzerdefinierte CSS-Eigenschaft. Das sollte das Problem für dich lösen, @Daniel_R. Du musst nur die Komponente aktualisieren.