Sto apportando piccole modifiche abituali a diversi stili in un unico componente del tema master per il nostro sito. Questo significa che non dobbiamo eseguire fork o modificare gli stili remoti senza preoccuparci che le nostre modifiche vengano perse al prossimo aggiornamento. Finora le mie modifiche sono state universali, come la modifica del pulsante “Mi piace”, ecc.
Volevo sapere se è possibile indirizzare uno stile specifico del componente del tema senza influenzare gli altri? Forse attraverso alcune variabili dati?
Non voglio dover creare un componente del tema separato per qualcosa di così minore. Mi piace l’idea di avere un unico componente del tema per le mie modifiche universali..
Sì, di solito puoi affidarti alla specificità all’interno del CSS. Se non hai familiarità con il CSS, la cosa si riduce a questo: se hai una serie di stili che mirano allo stesso elemento, vincerà lo stile più specifico.
Quindi, ciò che dovresti cercare è capire 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, o .custom-link o, se non c’è una classe diretta sull’elemento, sfruttando il genitore come .custom-container a. Se il componente ha lo stile definito originariamente come .custom-link, puoi assicurarti che venga sovrascritto mirando in modo più specifico a a.custom-link.
Se non c’è una classe unica da qualche parte nel componente, dovresti anche poter utilizzare il contenitore dell’uscita del plugin. Quando un’uscita del plugin viene utilizzata in una personalizzazione, viene aggiunta una classe personalizzata al contenitore. Riprendendo l’esempio della formattazione di un link, potrebbe assomigliare a qualcosa come .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 formattare ciò di cui hai bisogno.
Se è difficile da seguire, fornire un esempio specifico dal componente che stai cercando di formattare sarebbe d’aiuto.
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?