A melhor maneira de substituir o plugin CSS?

36

Atualmente, uso a especificidade do CSS para substituir estilos de plug-in. Eu prefiro isso para editar o plugin, pois faz menos dores de cabeça quando você atualiza.

Seria bom se minha folha de estilo fosse carregada depois dos plugins, de modo que eu tivesse que ser tão específico, não mais. Isso tornaria minhas folhas de estilo muito mais bonitas.

    
por Mild Fuzz 07.10.2010 / 12:54
fonte

7 respostas

21

Como você sugere, a abordagem mais elegante é quando suas substituições CSS são carregadas após o CSS injetado pelos plugins. Isso é muito fácil de alcançar - você só precisa garantir que header.php chama wp_head() antes de fazer referência à sua folha de estilos:

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

    <?php wp_head(); ?>

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

Existem várias maneiras pelas quais os plugins podem lidar com CSS.

  • melhor caso: o plugin coloca as CSS em fila e fornece a opção de desativá-lo (desative-o, copie o código CSS para sua folha de estilo e fique feliz);
  • bom caso: plugins engancham a função que enfileira o estilo (desencaixa a função, engancha seus próprios com mods se necessário);
  • caso usual: o plugin coloca as CSS diretamente. Veja Como extrair um script? (aplica-se também aos estilos). Versão curta - haverá função dequeue no futuro lançamento do WP, por enquanto poderia contornar com wp_deregister_*
  • caso ruim: o plugin ecoa o CSS entre várias outras coisas. Caso a caso ...

Em geral, na minha opinião, é melhor e mais fácil desativar folhas de estilo separadas e incorporá-las à sua para minimizar problemas e melhorar o desempenho (menos arquivos para buscar).

    
por Rarst 07.10.2010 / 13:09
fonte
1

Salvei uma cópia do plugin "não desejável" CSS na pasta do tema e importe-a para o tema css adicionando

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

para ele (substituindo, é claro, o nome do .css pelo que estou injetando). Em seguida, modifico a cópia do css na pasta do tema e a salvo no servidor, como faço para os outros arquivos. Ah, sim, às vezes pode ser necessário "pregar" os IDs ou classes alteradas, atribuindo-lhes um "! Importante".

Eu não sei se isso é o estado da arte, mas não faz mal e funciona muito bem.

    
por Sven Knoch 27.07.2011 / 03:49
fonte
1

Outra maneira bastante elegante é usar a especificidade do CSS.

Então, se o css do plugin diz:

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

você define em seu css:

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

Veja também a resposta de Michael Rader para uma pergunta semelhante.

    
por Andreas 05.01.2012 / 17:36
fonte
0

Para substituir o css do plugin, que já estava usando especificidade e! important, usei o id para sobrescrever as classes. Isso limpou meu código um pouco. É claro que também não é uma solução perfeita, pois só funciona quando há identidades atribuídas a elementos e classes.

Você também pode usar seletores de atributos em teoria. No entanto, ainda tenho que testar essa teoria.

    
por Sean H. Smith 28.08.2013 / 08:02
fonte
0

Acabei usando o! important para o meu css customizado e que substitui o estilo do plugin com o qual eu estava tendo problemas. O desenvolvedor do plugin estava usando! Importante em todo o plugin css e é por isso que não pude sobrescrevê-lo sem! Importante.

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

Para substituir o css do plugin, que já estava usando especificidade e! important, usei o id para sobrescrever as classes. Isso limpou meu código um pouco. É claro que também não é uma solução perfeita, pois só funciona quando há identidades atribuídas a elementos e classes.

Você também pode usar seletores de atributos em teoria. No entanto, ainda tenho que testar essa teoria.

    
por dsdsd 03.11.2017 / 09:51
fonte

Tags