Melhor maneira de substituir o CSS do plugin?

36

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

Seria bom se minha folha de estilos fosse carregada após os plugins, para que eu só precise ser o mais específico, não mais. Isso tornaria minhas folhas de estilo muito mais bonitas.

plugins css Fuzz leve
fonte
1
voto positivo por me ensinar sobre a especificidade de CSS, nunca ouvi falar disso antes de sua pergunta e isso me ajudou muito!
luke_mclachlan

Respostas:

21

Como você sugere, a abordagem mais elegante é quando suas substituições de CSS são carregadas após o CSS injetado pelos plug-ins. Isso é bastante fácil de conseguir - você só precisa garantir que suas header.phpchamadas 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>
Tim Coulter
fonte
E se eu estiver usando um tema infantil? Não gosto de substituir o header.php do meu tema principal.
Jules
19

Existem várias maneiras de os plugins lidarem com CSS.

  • melhor caso: o plugin enfileira o CSS e fornece a opção para desativá-lo (desative-o, copie o código CSS para sua folha de estilo e seja feliz);
  • bom caso: função de ganchos de plugins que enfileiram estilo (função de desengatar, ganhe seu próprio com mods, se necessário);
  • caso usual: o plugin enfileira o CSS diretamente. Consulte Como desenfileirar um script? (aplica-se também a estilos). Versão curta - haverá uma função de desenfileiramento na versão futura do WP, pois agora pode contornarwp_deregister_*
  • caso ruim: o plugin faz eco do 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 às suas próprias para minimizar problemas e melhorar o desempenho (menos arquivos a serem buscados).

Rarst
fonte
Como eu saberia qual é?
IanEdington
1
Observando o código principalmente. :)
Primeira vez 18/11/2015
2

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.

Andreas
fonte
Ok, muito obrigado. Essa seria a resposta aceita para mim. Basta usar o estilo geral.css e a especificidade funciona como um brilho!
Luca Reghellin
1

Eu salvo uma cópia do CSS do plug-in "não disposto" na pasta do tema e importo-a no css do tema adicionando

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

a ele (substituindo, é claro, o nome do .css por aquele que estou injetando). Modifico a cópia de 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 "identificar" os IDs ou classes alteradas, atribuindo a eles um "! Important".

Não sei se esse é o estado da arte, mas não faz mal e funciona bem.

Sven Knoch
fonte
0

Para substituir o CSS do plugin, que já estava usando especificidade e! Important, usei o ID para substituir as classes. Isso limpou um pouco meu código. Obviamente, também não é uma solução perfeita, pois só funciona quando se há IDs atribuídos a elementos e classes.

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

Sean H. Smith
fonte
0

Acabei usando! Important para meu CSS personalizado e substitui o estilo do plug-in com o qual estava tendo problemas. O desenvolvedor do plugin estava usando! Important em todo o plugin css e é por isso que eu não poderia substituí-lo sem! Important.

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

Para substituir o CSS do plugin, que já estava usando especificidade e! Important, usei o ID para substituir as classes. Isso limpou um pouco meu código. Obviamente, também não é uma solução perfeita, pois só funciona quando se há IDs atribuídos a elementos e classes.

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

dsdsd
fonte