Лучший способ переопределить CSS плагина?

Question

Лучший способ переопределить CSS плагина?

7 окт. 2010 г., 13:54:30

Просмотры: 52.1K

Голосов: 39

В настоящее время я использую специфичность CSS для переопределения стилей плагина. Я предпочитаю этот метод для редактирования плагина, так как он создает меньше проблем при обновлении.

Было бы удобно, если бы моя таблица стилей загружалась после плагинов, чтобы мне нужно было быть только таким же специфичным, а не более. Это сделало бы мои таблицы стилей намного красивее.

Mild Fuzz

4.2K

плагины css

Комментарии

спасибо за объяснение CSS Specificity, раньше не слышал об этом, и ваша подсказка мне очень помогла!

luke_mclachlan

18 нояб. 2016 г. 17:35:06

Все ответы на вопрос

Комментарии

А что если я использую дочернюю тему? Мне не хочется переопределять header.php родительской темы.

Jules

7 нояб. 2012 г. 12:10:42

Плагины могут обрабатывать CSS несколькими способами.

Лучший вариант: плагин ставит CSS в очередь и предоставляет возможность отключить его (отключите, скопируйте код CSS в свою таблицу стилей и наслаждайтесь);
Хороший вариант: плагин использует хуки для функции, которая ставит стиль в очередь (отключите функцию, подключите свою с нужными изменениями);
Обычный вариант: плагин ставит CSS в очередь напрямую. Смотрите Как убрать скрипт из очереди? (применимо и к стилям). Краткая версия — в будущих версиях WordPress появится функция для этого, а пока можно использовать wp_deregister_*.
Плохой вариант: плагин выводит CSS среди кучи другого кода. Тут нужно разбираться индивидуально...

В целом, на мой взгляд, лучше и проще отключать отдельные таблицы стилей и включать их в свою собственную, чтобы минимизировать проблемы и улучшить производительность (меньше файлов для загрузки).

Rarst

100K

7 окт. 2010 г. 14:09:30

Комментарии

Как мне узнать, какой именно это?

IanEdington

18 нояб. 2015 г. 02:30:46

В основном, посмотрев код. :)

Rarst

18 нояб. 2015 г. 10:36:52

Ещё один довольно элегантный способ — использовать специфичность CSS.

Итак, если в CSS плагина указано:

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

вы можете определить в своём CSS:

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

Также смотрите ответ Майкла Радера на похожий вопрос.

Andreas

131

5 янв. 2012 г. 18:36:50

Комментарии

Хорошо, большое спасибо. Для меня это будет принятым ответом. Просто используйте общий style.css, и специфичность работает как по волшебству!

Luca Reghellin

18 мая 2015 г. 12:44:48

Я сохраняю копию CSS плагина "not willing" в папку темы и импортирую его в CSS темы, добавив:

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

конечно, заменяя название .css на то, которое я внедряю. Затем я изменяю копию CSS в папке темы и сохраняю её на сервер, как и с другими файлами. Ах да, иногда может потребоваться "закрепить" изменённые ID или классы, назначив им "!important".

Не знаю, соответствует ли это последним стандартам, но это не вредит и отлично работает.

Sven Knoch

11

27 июл. 2011 г. 04:49:03

В итоге я использовал !important для своего пользовательского CSS, и это переопределило стили плагина, с которым у меня были проблемы. Разработчик плагина использовал !important во всем CSS плагина, поэтому я не мог перезаписать стили без !important.

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

Randy D

11

18 февр. 2017 г. 17:13:19

Чтобы переопределить CSS плагина, который уже использовал специфичность и !important, я применил идентификатор для переопределения классов. Это немного упростило мой код. Конечно, это тоже не идеальное решение, так как оно работает только в том случае, если элементам назначены не только классы, но и идентификаторы.

Теоретически можно также использовать селекторы атрибутов. Однако я пока не проверял эту теорию на практике.

Sean H. Smith

1

28 авг. 2013 г. 09:02:32

Чтобы переопределить CSS плагина, который уже использовал специфичность и !important, я применил идентификаторы для переопределения классов. Это немного упростило мой код. Конечно, это тоже не идеальное решение, так как работает только в случае, когда элементам присвоены не только классы, но и идентификаторы.

Теоретически можно также использовать селекторы атрибутов. Однако я пока не проверял эту теорию на практике.

dsdsd

1

3 нояб. 2017 г. 10:51:35

Tim Coulter 334 · Accepted Answer · 2011-01-08T18:08:02Z

Как вы правильно заметили, наиболее элегантный подход — когда ваши CSS-переопределения загружаются после стилей, добавленных плагинами. Достичь этого довольно просто — нужно лишь убедиться, что ваш файл header.php вызывает функцию wp_head() до подключения вашей таблицы стилей:

<head>
    <!-- здесь находится стандартная начальная разметка -->

    <?php wp_head(); ?>

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

Tim Coulter

334

8 янв. 2011 г. 18:08:02