¿La mejor manera de sobrescribir el complemento CSS?

36

Actualmente, utilizo la especificidad de CSS para anular los estilos de complementos. Prefiero esto para editar el complemento, ya que causa menos dolores de cabeza al actualizar.

Sería bueno si mi hoja de estilo se cargara después de los complementos, de modo que solo tengo que ser tan específico, no más. Esto haría que mis hojas de estilo sean mucho más bonitas.

    
pregunta Mild Fuzz 07.10.2010 - 12:54

7 respuestas

21

Como sugieres, el enfoque más elegante es cuando tus anulaciones de CSS se cargan después de la CSS inyectada por los complementos. Esto es bastante fácil de lograr, solo debes asegurarte de que tu header.php llama a wp_head() antes de que haga referencia a tu hoja de estilo:

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

    <?php wp_head(); ?>

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
</head>
    
respondido por el Tim Coulter 08.01.2011 - 17:08
19

Hay varias formas en que los complementos pueden manejar CSS.

  • best case: el complemento encola CSS y brinda la opción de desactivarlo (deshabilítelo, copie el código CSS en su hoja de estilo y sea feliz);
  • buen caso: los complementos enganchan la función que pone en cola el estilo (desenganche la función, enganche los suyos con mods si es necesario);
  • caso habitual: el complemento pone en cola el CSS directamente. Consulte ¿Cómo quitar la cola de un script? (también se aplica a los estilos). Versión corta: habrá una función de salida de cola en el futuro lanzamiento de WP, por ahora podría funcionar con wp_deregister_*
  • mal caso: el complemento hace eco de CSS entre otras muchas cosas. Caso por caso ...

En general, en mi opinión, es mejor y más fácil deshabilitar las hojas de estilo separadas e incorporarlas por su cuenta para minimizar los problemas y mejorar el rendimiento (menos archivos para recuperar).

    
respondido por el Rarst 07.10.2010 - 13:09
1

Guardo una copia del complemento "no deseado" en la carpeta del tema y lo importo al css del tema agregando

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

a él (reemplazando, por supuesto, el nombre de .css por el que estoy inyectando). Luego modifico la copia css en la carpeta de temas y la guardo en el servidor como lo hago para los otros archivos. Oh, sí, a veces puede ser necesario "clavar" los ID o las clases modificadas asignándoles un "! Important".

No sé si esto es lo último en tecnología, pero no hace daño y funciona bien.

    
respondido por el Sven Knoch 27.07.2011 - 03:49
1

Otra forma bastante elegante es usar la especificidad de CSS.

Entonces, si el css del complemento dice:

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

usted define en su css:

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

Consulte también la respuesta de Michael Rader para una pregunta similar.

    
respondido por el Andreas 05.01.2012 - 17:36
0

Para anular el css del complemento, que ya estaba usando especificidad y! importante, usé el ID para anular las clases. Esto limpió un poco mi código. Por supuesto, tampoco es una solución perfecta, ya que solo funciona cuando se asignan identificadores a elementos y clases.

También puedes usar selectores de atributos en teoría. Sin embargo, todavía tengo que poner esa teoría a prueba.

    
respondido por el Sean H. Smith 28.08.2013 - 08:02
0

Terminé usando! important para mi css personalizado y eso anula el estilo del complemento con el que estaba teniendo problemas. El desarrollador del plugin estaba usando! Important en todo el css del plugin y es por eso que no podría sobrescribirlo sin! Important.

body {
font-family: "Open Sans", Arial, sans-serif !important;
font-weight: 300 !important;    
}
    
respondido por el Randy D 18.02.2017 - 16:13
-1

Para anular el css del complemento, que ya estaba usando especificidad y! importante, usé el ID para anular las clases. Esto limpió un poco mi código. Por supuesto, tampoco es una solución perfecta, ya que solo funciona cuando se asignan identificadores a elementos y clases.

También puedes usar selectores de atributos en teoría. Sin embargo, todavía tengo que poner esa teoría a prueba.

    
respondido por el dsdsd 03.11.2017 - 09:51

Lea otras preguntas en las etiquetas