Miglior modo per personalizzare la formattazione del testo del link?

Sviluppatore
1

Qual è il modo migliore per personalizzare la formattazione del testo del link? Sembra che modificare il CSS non sia l’approccio migliore, poiché le modifiche andranno perse quando il plugin verrà aggiornato.

40
401738×632 42.5 KB

Vorrei renderlo in grassetto e cambiare il colore del testo per abbinarlo al tema del sito, in modo che si integri meglio.

Al momento il link appare così -

03
03778×104 16.7 KB

e vorrei che apparisse così -

39
39802×114 16.2 KB

Sarebbe utile poter personalizzare il testo in base al tema. Ho un tema scuro e uno chiaro con colori dei font diversi per ciascuno. Vorrei impostare il colore del testo in modo che corrisponda al tema.

2

Devi creare un nuovo componente del tema con le tue modifiche e poi aggiungerlo nello stesso tema principale dove si trovano i Link dell’Intestazione Personalizzata.

3

Grazie! L’ho fatto e ha funzionato alla perfezione.

Per curiosità, come fa il sito a scegliere quale CSS utilizzare? Se il componente del tema standard contiene CSS che imposta il colore del font su $header_primary -

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

come fa a sapere di utilizzare il CSS del mio nuovo componente invece?

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

Ciao @Johani - è ancora così? La mia istanza sembra riluttante ad adottare il colore $header_primary, e curiosamente, anche quando imposto $primary sul colore che desidero (bianco), rimane ostinatamente nero :upside_down_face: !

Screenshot 2021-02-06 at 14.16.12

5

Probabilmente è correlato al passaggio da SCSS a variabili CSS per le dichiarazioni dei colori. L’assegnazione di $header_primary nel CSS personalizzato non funziona, ma se usi

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

il colore viene rilevato correttamente.

6

Questa soluzione non ha funzionato per me. La stai aggiungendo al CSS personalizzato del tema?

7

Sì, era proprio così. Il componente ora utilizza la proprietà personalizzata CSS; questo dovrebbe risolvere il problema per te @Daniel_R, devi solo aggiornare il componente.