Meilleure façon de personnaliser le formatage du texte du lien ?

Dev
1

Quelle est la meilleure façon de personnaliser le formatage du texte du lien ? Il semble que l’édition du CSS ne soit pas la meilleure approche car les modifications seront perdues lors de la mise à jour du plugin.

40
401738×632 42.5 KB

Je souhaiterais le mettre en gras et changer la couleur du texte pour qu’elle corresponde au thème du site, ce qui l’aidera à s’intégrer.

Pour le moment, le lien ressemble à ceci -

03
03778×104 16.7 KB

Et je souhaiterais qu’il ressemble à ceci -

39
39802×114 16.2 KB

Il serait utile de pouvoir personnaliser le texte en fonction du thème également. J’ai un thème sombre et un thème clair avec des polices de couleurs différentes pour chacun. Je souhaiterais définir la couleur du texte pour qu’elle corresponde au thème.

2

Vous devez créer un nouveau composant de thème avec vos modifications, puis l’ajouter dans le même thème principal que les Liens d’en-tête personnalisés.

3

Merci ! Je l’ai fait maintenant et cela a fonctionné à merveille.

Par curiosité, comment le site choisit-il quel CSS utiliser ? Si le composant de thème standard contient du CSS qui définit la couleur de la police sur $header_primary -

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

alors comment sait-il d’utiliser le CSS de mon nouveau composant à la place ?

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

Bonjour @Johani - est-ce toujours le cas ? Mon instance semble réticente à adopter la couleur $header_primary, et curieusement, même lorsque je définis $primary sur la couleur souhaitée (blanc), elle reste obstinément noire :upside_down_face: !

Screenshot 2021-02-06 at 14.16.12

5

Cela est probablement lié au passage de SCSS aux variables CSS pour les déclarations de couleurs. L’assignation de $header_primary dans un CSS personnalisé ne fonctionne pas, mais si vous utilisez :

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

la couleur est correctement prise en compte.

6

Je n’ai pas réussi à faire fonctionner cette solution pour moi. Ajoutez-vous cela au CSS personnalisé du thème ?

7

Oui, c’était bien le cas. Le composant utilise désormais la propriété personnalisée CSS, ce qui devrait résoudre le problème pour vous @Daniel_R. Vous devez simplement mettre à jour le composant.