Meilleur moyen de remplacer le plugin CSS?

Question

Meilleur moyen de remplacer le plugin CSS?

- 37
- 43234 2010-10-07
Actuellement,j'utilise la spécificité CSSpour remplacer les styles deplugin.Jepréfère celapour éditer leplugin car celafaitmoins demaux detête lorsque vousmettez àjour.

Ce seraitbien quemafeuille de style soit chargée après lesplugins,de sorte queje n'ai qu'à être aussi spécifique,pasplus.Cela rendraitmesfeuilles de stylebeaucoupplusjolies.

Currently, I use CSS specificity to override plugin styles. I prefer this for editing the plugin as it makes less headaches when you update.

It would be nice if my style sheet loaded after the plugins, so that I only have to be as specific, not more. This would make my stylesheets much prettier.

plugins css

- upvotepourm'avoir appris la spécificité CSS,je n'en aijamaisentenduparler avant votre questionet celam'abeaucoup aidé!
  
  upvote for teaching me about CSS Specificity, never heard of it before your question and it helped me a bunch!
  - 1
  - 2016-11-18
  - luke_mclachlan

7 réponses

votes

- 19
- 2010-10-07
Lespluginspeuventgérer les CSS deplusieursmanières.

meilleur cas: lepluginmet le CSSen file d'attenteet propose une optionpour le désactiver (désactivez-le,copiez le code CSS dans votrefeuille de styleet soyez heureux);

bon cas: lesplugins accrochent lafonction quimet enfile d'attente le style (fonction de décrochage,accrochez le vôtre avec desmods sinécessaire);

cas habituel: lepluginmet directement le CSSen file d'attente.Voir Comment retirer un script de lafile d'attente? (s'applique également aux styles).Version courte -il y aura unefonction de retrait de lafile d'attente dans lafuture version de WP,pour l'instantpourraitfonctionner avec wp_deregister_*

mauvais cas: lepluginfait écho au CSSparmi untas d'autres choses.Au caspar cas ...

Dans l'ensemble,àmon avis,ilestpréférableet plusfacile de désactiver lesfeuilles de style séparéeset de lesincorporer dans les vôtrespourminimiser lesproblèmeset améliorer lesperformances (moins defichiers à récupérer).
There are several ways plugins can handle CSS.

best case: plugin queues CSS and provides option to disable it (disable it, copy CSS code to your stylesheet and be happy);

good case: plugins hooks function that queues style (unhook function, hook your own with mods if needed);

usual case: plugin queues CSS directly. See How to dequeue a script? (applies to styles as well). Short version - there will be dequeue function in future WP release, for now could work around with wp_deregister_*

bad case: plugin echoes CSS among bunch of other things. Case by case...

Overall in my opinion it is better and easier to disable separate stylesheets and incorporate them in your own to minimize issues and improve performance (less files to fetch).
- Commentpourrais-je savoir de quiil s'agit?
  
  How would I know which one it is?
  - 0
  - 2015-11-18
  - IanEdington
- En regardant le codeprincipalement.:)
  
  By looking at the code mostly. :)
  - 1
  - 2015-11-18
  - Rarst
- 2
- 2012-01-05
Une autremanière assez éléganteest d'utiliser la spécificité du CSS.

Donc,si le css duplugin 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.
Another quite elegant way is to use specificity of CSS.

So if the css of the plugin says:

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

you define in your css:

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

Also see the answer of Michael Rader for a similar question.
- D'accord,mercibeaucoup.Ce serait la réponse acceptéepourmoi.Utilisez simplement le style.cssgénéralet la spécificitéfonctionne comme un éclat!
  
  Ok thank you very much. This would be the accepted answer for me. Just use the general style.css and specificity works like a shine!
  - 1
  - 2015-05-18
  - Luca Reghellin
- 1
- 2011-07-27
Je sauvegarde une copie duplugin CSS "not want" dans le dossier duthèmeet je l'importe dans lethème cssen ajoutant

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

à lui (en remplaçant,bien sûr,lenom du .csspar celui quej'injecte).Ensuite,je modifie la copie css dans le dossier duthèmeet je l'enregistre sur le serveur commeje lefaispour les autresfichiers.Oh,oui,parfoisilpeut êtrenécessaire de "clouer" lesidentifiants ou classesmodifiésen leur attribuant un "! Important".

Jene saispas si c'est l'état de l'art,mais celane fait aucunmalet fonctionnetrèsbien.
I save a copy of the "not willing" plugin CSS to the theme folder and import it into the theme css by adding

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

to it (replacing, of course, the name of the .css by the one I'm injecting). Then I modify the css copy in the theme folder and save it to server as I do for the other files. Oh, yes, sometimes it may be necessary to "nail" the IDs or classes altered by assigning them an "!important".

I do not know if this is state of the art, but it does no harm and works just fine.
- 0
- 2013-08-28
Pour remplacer le css duplugin,qui utilisait déjà la spécificitéet!important,j'ai utilisé l'idpour remplacer les classes.Cela anettoyé unpeumon code.Bien sûr,cen'estpasnonplus une solutionparfaiteen ce sens qu'ellene fonctionne que si desidentifiants sont affectés à des éléments ainsi qu'à des classes.

Vouspouvez également utiliser des sélecteurs d'attributsen théorie.Cependant,je n'aipasencoremis cettethéorie à l'épreuve.

To override the css of plugin, that was already using specificity and !important, I used the id to override the classes. This did clean up my code a bit. Of course, it too is not a perfect solution in that it only works when if there are id's assigned to elements as well as classes.

You could also use attribute selectors in theory. However, I have yet to put that theory to test.
- 0
- 2017-02-18
J'aifini par utiliser!importantpourmon csspersonnaliséet cela remplace le style duplugin avec lequelj'avais desproblèmes.Le développeur duplugin utilisait! Importanttout au long duplugin csset c'estpourquoije nepourraispas l'écraser sans! Important.

body { font-family: "Open Sans", Arial, sans-serif !important; font-weight: 300 !important; }
I ended up using !important for my custom css and that override the styling for the plugin that I was having trouble with. The developer of the plugin was using !important throughout the plugin css and that is why I could not overwrite it without !important.

body { font-family: "Open Sans", Arial, sans-serif !important; font-weight: 300 !important; }
- -1
- 2017-11-03
Pour remplacer le css duplugin,qui utilisait déjà la spécificitéet!important,j'ai utilisé l'idpour remplacer les classes.Cela anettoyé unpeumon code.Bien sûr,cen'estpasnonplus une solutionparfaite dans lamesure où celane fonctionne que si desidentifiants sont affectés à des éléments ainsi qu'à des classes.

Vouspouvez également utiliser des sélecteurs d'attributsen théorie.Cependant,je n'aipasencoretesté cettethéorie.

To override the css of plugin, that was already using specificity and !important, I used the id to override the classes. This did clean up my code a bit. Of course, it too is not a perfect solution in that it only works when if there are id's assigned to elements as well as classes.

You could also use attribute selectors in theory. However, I have yet to put that theory to test.

Tim Coulter · Accepted Answer · 2011-01-08

21

2011-01-08

Comme vous le suggérez,l'approche laplus éléganteest lorsque vos remplacements CSS sont chargés après le CSSinjectépar lesplugins.C'est assezfacile à réaliser -il vous suffit de vous assurer que votre header.php appelle wp_head() avant defaire référence à votrefeuille 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>

As you suggest, the most elegant approach is when your CSS overrides are loaded after the CSS injected by the plugins. This is quite easy to achieve - you just need to make sure that your header.php calls wp_head() before it references your style sheet:

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

    <?php wp_head(); ?>

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

Et sij'utilise unthèmeenfant?Jen'aimepas remplacer le header.php demonthèmeparent.

And what if I'm using a child theme? I don't like to override the header.php of my parent theme.
- 0
- 2012-11-07
- Jules