Qual è il modo migliore per sovrascrivere il CSS di un plugin?

Question

Qual è il modo migliore per sovrascrivere il CSS di un plugin?

7 ott 2010, 13:54:30

Visualizzazioni: 52.1K

Voti: 39

Attualmente, uso la specificità CSS per sovrascrivere gli stili dei plugin. Preferisco questo metodo per modificare il plugin poiché causa meno problemi quando si effettuano gli aggiornamenti.

Sarebbe utile se il mio foglio di stile si caricasse dopo i plugin, così da dover essere solo altrettanto specifico, non di più. Questo renderebbe i miei fogli di stile molto più puliti.

Mild Fuzz

4.2K

plugin css

Commenti

voto positivo per avermi insegnato la Specificità CSS, non ne avevo mai sentito parlare prima della tua domanda e mi è stato molto utile!

luke_mclachlan

18 nov 2016 17:35:06

Tutte le risposte alla domanda

Commenti

E se sto usando un child theme? Non mi piace sovrascrivere il file header.php del mio tema genitore.

Jules

7 nov 2012 12:10:42

Esistono diversi modi in cui i plugin possono gestire il CSS.

caso migliore: il plugin accoda il CSS e fornisce l'opzione per disabilitarlo (disabilitalo, copia il codice CSS nel tuo foglio di stile e sarai felice);
buon caso: il plugin aggancia una funzione che accoda lo stile (sgancia la funzione, aggancia la tua con le modifiche se necessario);
caso usuale: il plugin accoda il CSS direttamente. Vedi Come rimuovere uno script dalla coda? (si applica anche agli stili). Versione breve - ci sarà una funzione deque in una futura versione di WP, per ora puoi aggirare il problema con wp_deregister_*
caso pessimo: il plugin stampa il CSS insieme a un mucchio di altre cose. Da valutare caso per caso...

In generale, secondo me è meglio e più semplice disabilitare i fogli di stile separati e incorporarli nel tuo per minimizzare i problemi e migliorare le prestazioni (meno file da recuperare).

Rarst

100K

7 ott 2010 14:09:30

Commenti

Come faccio a sapere quale delle due è?

IanEdington

18 nov 2015 02:30:46

Principalmente guardando il codice. :)

Rarst

18 nov 2015 10:36:52

Un altro modo piuttosto elegante è sfruttare la specificità del CSS.

Quindi se il CSS del plugin dice:

div.product div.images img {
  ......
}

puoi definire nel tuo CSS:

body div.product div.images img {
  ......
}

Vedi anche la risposta di Michael Rader per una domanda simile.

Andreas

131

5 gen 2012 18:36:50

Commenti

Ok grazie mille. Questa sarebbe la risposta accettata per me. Basta usare il file style.css generale e la specificità funziona alla perfezione!

Luca Reghellin

18 mag 2015 12:44:48

Salvo una copia del CSS del plugin "not willing" nella cartella del tema e lo importo nel CSS del tema aggiungendo

@import url('nome-del-plugin-css.css');

ad esso (sostituendo, ovviamente, il nome del .css con quello che sto iniettando). Poi modifico la copia del css nella cartella del tema e la salvo sul server come faccio per gli altri file. Oh, sì, a volte può essere necessario "inchiodare" gli ID o le classi alterate assegnando loro un "!important".

Non so se questa sia la tecnica più avanzata, ma non fa male e funziona benissimo.

Sven Knoch

11

27 lug 2011 04:49:03

Alla fine ho utilizzato !important per il mio CSS personalizzato e questo ha sovrascritto lo stile del plugin con cui avevo problemi. Lo sviluppatore del plugin stava usando !important in tutto il CSS del plugin ed è per questo che non riuscivo a sovrascriverlo senza usare !important.

body {
font-family: "Open Sans", Arial, sans-serif !important;
font-weight: 300 !important;    
}

Randy D

11

18 feb 2017 17:13:19

Per sovrascrivere il CSS del plugin, che già utilizzava specificità e !important, ho usato l'ID per sovrascrivere le classi. Questo ha pulito un po' il mio codice. Naturalmente, anche questa non è una soluzione perfetta in quanto funziona solo se ci sono ID assegnati agli elementi oltre alle classi.

In teoria potresti anche usare i selettori di attributo. Tuttavia, non ho ancora messo alla prova questa teoria.

Sean H. Smith

1

28 ago 2013 09:02:32

Per sovrascrivere il CSS del plugin, che già utilizzava specificità e !important, ho utilizzato l'id per sovrascrivere le classi. Questo ha pulito un po' il mio codice. Naturalmente, anche questa non è una soluzione perfetta in quanto funziona solo se ci sono id assegnati agli elementi oltre alle classi.

In teoria potresti anche utilizzare i selettori di attributo. Tuttavia, devo ancora mettere alla prova questa teoria.

dsdsd

1

3 nov 2017 10:51:35

Tim Coulter 334 · Accepted Answer · 2011-01-08T18:08:02Z

Come suggerisci, l'approccio più elegante è quando i tuoi override CSS vengono caricati dopo il CSS iniettato dai plugin. Questo è abbastanza facile da ottenere - devi solo assicurarti che il tuo header.php chiami wp_head() prima di fare riferimento al tuo foglio di stile:

<head>
    <!-- tutto il solito preambolo va qui -->

    <?php wp_head(); ?>

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
</head>

Tim Coulter

334

8 gen 2011 18:08:02