Давным-давно я установил на WordPress плагин Starbox. По умолчанию его фон был белый и не подходил мне по расцветке, поэтому мне приходилось исправлять его файлы стилей. После каждого обновления плагина это приходилось делать заново. Есть способ не вносить данные исправления каждый раз, а создать собственный стиль, который потом можно применять. Сделать это можно через настройки WordPress:
Консоль WordPress ▶ Внешний вид ▶ Настроить ▶ Дополнительные стили
В данном окошке мы вводим новые правила CSS. Для моего блога (для StarBox я использую тему Fancy) правила такие:

.abh_tab_content
{
  background: #c2d3dc !important;
}

.abh_tabs li.abh_active a
{
  background: #c2d3dc !important;
}

.abh_tabs li a
{
  background: #d2d8db !important;
}

.abh_tabs li a:hover
{
  background: #c6dce6 !important;
}

.abh_tabs li.abh_active a:hover
{
  background: #c6dce6 !important;
}
​

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

Я не нашёл решения/фикса, поэтому чтобы данные правила заработали, мне пришлось вручную удалять символы окончания строки, а потом их заново вставлять! Поскольку это нужно сделать только один раз, я не стал дальше разбираться.

Использование хуков

Поскольку, после каждого обновления нужно было заново перезаписывать файл стилей, я решил создать отдельный файл со стилями для плагина:

/* Custom styles */
.abh_box.abh_box_down.abh_box_fancy>.abh_tab_content {
    background: #c2d3dc !important;
}

.abh_box.abh_box_down.abh_box_fancy>.abh_tabs li.abh_active a {
    background: #c2d3dc !important;
}

.abh_box.abh_box_down.abh_box_fancy>.abh_tabs li a {
    background: #d2d8db !important;
}

.abh_box.abh_box_down.abh_box_fancy>.abh_tabs li a:hover {
    background: #c6dce6 !important;
}

.abh_box.abh_box_down.abh_box_fancy>.abh_tabs li.abh_active a:hover {
    background: #c6dce6 !important;
}

Теперь нужно было создать хук для подключения этого файла стилей. Для этого я, вместо правки functions.php, использовал плагин code-snippets. Там я добавил сниппет:

function add_custom_starbox_styles() {
    wp_enqueue_style(
        'my-starbox-override',
        get_stylesheet_directory_uri() . '/starbox-custom.css',
        array(),
        filemtime(get_stylesheet_directory() . '/starbox-custom.css') // Auto version update
    );
}
add_action('wp_enqueue_scripts', 'add_custom_starbox_styles', 100); // High priotity, to add style last

Примечание

Конкретно для плагина Starbox можно не использовать хуки, а сразу внести строчки в style.css дочерней темы.
Т.к. хуки для данного плагина не работают даже с приоритетом 100, я использовал расширенный путь к классу, так что этого будет достаточно, чтобы наше правило не замещалось правилами css плагина.

• Об авторе
• Недавние публикации

DenTNT

Задать вопрос в Telegram:
@dentnt.trmw.ru
Помочь проекту: Яндекс.Деньги

DenTNT недавно публиковал (посмотреть все)

• WPF: Не обновляется привязка к TextBox - 29.04.2025
• GitHub Desktop: Ошибка при попытке отправки коммита - 28.03.2025
• Visual Studio: Включить XAML Live Preview - 24.03.2025