Le meilleur moyen de remplacer le plugin CSS?

36

Actuellement, j'utilise la spécificité CSS pour remplacer les styles de plug-in. Je préfère ceci pour l'édition du plugin car cela fait moins de maux de tête lorsque vous mettez à jour.

Ce serait bien si ma feuille de style était chargée après les plugins, de sorte que je n’aie besoin que d’être aussi spécifique, pas plus. Cela rendrait mes feuilles de style beaucoup plus jolies.

plugins css Fuzz doux
la source
1
upvote pour m'avoir appris sur la spécificité CSS, je n'en avais jamais entendu parler avant votre question et cela m'a beaucoup aidé!
luke_mclachlan

Réponses:

21

Comme vous le suggérez, l'approche la plus élégante consiste à charger vos substitutions CSS après les injections de CSS par les plugins. C'est assez facile à réaliser - il vous suffit de vous assurer que vos header.phpappels wp_head()avant de faire référence à votre feuille de style:

<head>
    <!-- all the usual preamble stuff goes here -->

    <?php wp_head(); ?>

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
</head>
Tim Coulter
la source
Et si j'utilise un thème pour enfants? Je n'aime pas remplacer le header.php de mon thème parent.
Jules
19

Les plugins peuvent gérer les CSS de plusieurs manières.

  • dans le meilleur des cas: le plugin met en file d'attente CSS et fournit l'option de le désactiver (le désactiver, copier le code CSS dans votre feuille de style et être heureux);
  • bon cas: fonction de hooks de plugins qui met en file d'attente le style (fonction de décrochage, accrochez votre propre avec des mods si nécessaire);
  • cas habituel: le plugin met directement en file d'attente CSS. Voir Comment supprimer un script? (s'applique aussi aux styles). Version courte - il y aura une fonction de suppression de la file d'attente dans la prochaine version de WP;wp_deregister_*
  • mauvaise affaire: le plugin fait écho à CSS parmi beaucoup d'autres choses. Cas par cas...

Globalement, à mon avis, il est préférable et plus facile de désactiver des feuilles de style distinctes et de les incorporer dans le vôtre afin de minimiser les problèmes et d’améliorer les performances (moins de fichiers à récupérer).

Rarst
la source
Comment pourrais-je savoir lequel c'est?
IanEdington
1
En regardant le code principalement. :)
Rarst
2

Une autre manière assez élégante consiste à utiliser la spécificité de CSS.

Donc si le css du plugin dit:

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

vous définissez dans votre css:

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

Voir également la réponse de Michael Rader pour une question similaire.

Andreas
la source
D'accord, merci beaucoup. Ce serait la réponse acceptée pour moi. Utilisez simplement le style général.css et la spécificité fonctionne comme un éclat!
Luca Reghellin
1

Je sauve une copie du plugin CSS "ne veut pas" dans le dossier du thème et l'importe dans le css du thème en ajoutant

@import url('name-of-the-plugin-css.css');

(en remplaçant, bien sûr, le nom du fichier .css par celui que j’injecte). Ensuite, je modifie la copie css dans le dossier du thème et l’enregistre sur le serveur comme je le fais pour les autres fichiers. Oh oui, il est parfois nécessaire de "clouer" les identifiants ou les classes modifiées en leur attribuant un "! Important".

Je ne sais pas si cela est à la pointe de la technologie, mais cela ne fait aucun mal et fonctionne très bien.

Sven Knoch
la source
0

Pour remplacer le css du plugin, qui utilisait déjà la spécificité et! Important, j'ai utilisé l'id pour remplacer les classes. Cela a un peu nettoyé mon code. Bien sûr, ce n'est pas non plus une solution parfaite dans la mesure où cela ne fonctionne que s'il existe des identifiants attribués à des éléments ainsi qu'à des classes.

Vous pouvez également utiliser des sélecteurs d'attributs en théorie. Cependant, je n'ai pas encore testé cette théorie.

Sean H. Smith
la source
0

J'ai fini par utiliser! Important pour mon css personnalisé et cela remplace le style du plugin avec lequel j'avais des problèmes. Le développeur du plugin utilisait! Important tout au long du plugin css et c'est pourquoi je ne pouvais pas l'écraser sans! Important.

body {
font-family: "Open Sans", Arial, sans-serif !important;
font-weight: 300 !important;    
}
Randy D
la source
-1

Pour remplacer le css du plugin, qui utilisait déjà la spécificité et! Important, j'ai utilisé l'id pour remplacer les classes. Cela a un peu nettoyé mon code. Bien sûr, ce n'est pas non plus une solution parfaite dans la mesure où cela ne fonctionne que s'il existe des identifiants attribués à des éléments ainsi qu'à des classes.

Vous pouvez également utiliser des sélecteurs d'attributs en théorie. Cependant, je n'ai pas encore testé cette théorie.

dsdsd
la source