Posso selezionare uno stile con CSS?

[TheDarkWizard]

@awesomerobot

Sì, di solito puoi fare affidamento sulla specificità all’interno del CSS. Se non hai familiarità con il CSS, la regola è questa: se hai diversi stili che mirano allo stesso elemento, vincerà quello più specifico.

<div class="custom-container">
  <a class="custom-link">link qui</a>
</div>

Quindi, quello su cui dovresti concentrarti è verificare se l’elemento (o un elemento genitore) nel componente che stai cercando di modificare ha una classe unica da qualche parte… qualcosa come:

Dall’esempio sopra, oppure .custom-link o, se non c’è una classe diretta sull’elemento, utilizzando il genitore come .custom-container a. Se il componente ha lo stile originariamente definito come .custom-link, puoi assicurarti che venga sovrascritto targettizzando in modo più specifico a.custom-link.

Se non c’è una classe unica da qualche parte nel componente, dovresti anche essere in grado di utilizzare il contenitore dell’plugin outlet. Quando un plugin outlet viene utilizzato in una personalizzazione, viene aggiunta una classe personalizzata al contenitore. Riprendendo l’esempio dello stile di un link, potrebbe assomigliare a .above-site-header-outlet.brand-header a, dove “brand-header” è il nome del modello aggiunto dal componente.

Nel caso peggiore, puoi anche chiedere alla persona che ha creato il componente di aggiungere una classe se non riesci a trovare un modo semplice per stilizzare ciò di cui hai bisogno.

Grazie mille. Questo aiuta sicuramente.

@awesomerobot

Un esempio specifico dal componente che stai cercando di stilizzare sarebbe utile.

Come esempio, ho installato Graceful. Graceful Theme il quale ora mi rendo conto che hai pubblicato come continuazione di uno stile precedente.

Nel mio componente tema universale, ho fatto cose come caricare asset di sfondo, modificare il pulsante “Mi piace” e altre piccole cose, ma mi sono reso conto di voler cambiare il colore di sfondo in quello che utilizza la palette scura con qualsiasi cosa io voglia, senza influenzare quello che utilizza la palette chiara.

Per essere precisi, questo:

background-color: $primary-very-low;

Ora, vorrei fare il più possibile in un unico componente tema, poiché tecnicamente è lo stesso stile, fino a quando non sono comparse piccole cose come questa, che non erano modifiche universali. Non voglio dover creare un componente “Scuro” e uno “Chiaro” se possibile.

L’obiettivo qui è lasciare Graceful intatto a parte le alterazioni della palette e fare tutto dal nostro componente, in modo che quando tu o qualcun altro pubblicate un aggiornamento, non dobbiamo continuare a riapplicare le nostre modifiche.

Ho notato che Discourse è molto orientato alle variabili, cosa che adoro; leggere le guide sulla tematizzazione è stato un piacere. Ho notato cose come [data-topic-id="117"], quindi forse qualcosa come [data-theme-id] potrebbe essere proposto?