Переопределить встроенный CSS

У темы WordPress, которую я использую, есть несколько встроенных CSS в заголовке, и одна из вещей, которые я пытаюсь изменить, это верхний / нижний отступы заголовка. Во встроенном CSS это указано как:

    <head>
    ...
        <style type="text/css" data-type="vc_custom-css">
        #site-header:not(.shrink) .site-title { padding: 60px 0 !important; }
        </style>
    </head>

<body class="home page page-id-24236 page-child parent-pageid-5 page-template-default logged-in admin-bar wpb-js-composer js-comp-ver-4.12.1 vc_responsive customize-support">
    <div id="page" class="layout-fullwidth">
        <div id="site-header-wrapper">
            <header id="site-header" class="site-header" role="banner">
                <div class="container container-fullwidth">
                <div class="header-main logo-position-left header-layout-fullwidth header-style-3">
                <div class="site-title">                                
                    <h1><a href="#" rel="home"></h1>    
                </div>
                </div>
                </div>
            </header>
        </div>
    </div>
</body>

Очевидно, что #site-header:not(.shrink) .site-title {...! Важный} не будет работать в моем файле styles.css.

Я пробовал следующее, и это все еще не работает:

[style]#site-header:not(.shrink).site-title { padding: 1px 0 !important; }

Как мне заставить это переопределить?

Источник

4 ответа

Решение

Блоки стилей, которые не из таблицы стилей, воняют. Я действительно презираю это, когда разработчики темы помещают их в свою тему. Хуже только встроенные стили (т.е. <div style="padding: 5px !important;">). Это практически невозможно преодолеть.

В вашем случае, есть несколько способов взломать эту хакерскую проблему.

В файле functions.php вашей дочерней темы вы можете использовать следующее (по общему признанию хакерское) решение:

// We're adding a HIGH priority of 9999 which should cause this to be output AFTER the theme's bad styles.
add_action('wp_head', 'fix_bad_theme_styles', 9999);

function fix_bad_theme_styles() { ?>
    <style type="text/css" data-type="vc_custom-css">
            #site-header:not(.shrink) .site-title { padding: 1px 0 !important; }
    </style>
<?php }

Если это не сработает, еще более хакерский способ - поместить стиль в нижний колонтитул. Это будет работать, но это не лучшая практика (как если бы это решение было!):

add_action('wp_footer', 'fix_bad_theme_styles');
Источник

Если вы уже используете дочернюю тему, вы можете переопределить определенный файл, например footer.php

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

Источник

Попробуйте добавить больше специфичности в ваше правило, например:

body.anotherParentClass # site-header: not (.shrink).site-title {padding: 1px 0! важный; }

Example: https://jsfiddle.net/robsilva/wx113Lxo/
Источник

Вы забыли пробел между .site-title а также :not часть. Попробуйте это вместо этого:

#site-header:not(.shrink) .site-title { padding: 1px 0 !important; }
Источник
Другие вопросы по тегам