user3088202 user3088202 - 29 days ago 8
CSS Question

Override inline css

WordPress theme I am using has some inline css in the header and one of the things I am trying to change is the header top/bottom padding. In the inline css its listed as:

<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>


Obliviously, #site-header:not(.shrink) .site-title {... !important} is not going to work in my styles.css.

I have tried the following and it still doesn't work:

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


How do I get it to override?

Answer

Style blocks that aren't from the stylesheet stink. I truly despise it when theme developers put them in their theme. The only thing worse is inline styles (ie <div style="padding: 5px !important;">). Those are virtually impossible to overcome.

In your case, there's a couple of hack-tastic way to overcome this hacky issue.

In your child theme's functions.php file, you can use the following (Admittedly hacky) solution:

// 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 }

If that doesn't work, an even hackier way would be to put the style in the footer. It'll work, but it's not best-practice (as if any of this solution is!):

add_action('wp_footer', 'fix_bad_theme_styles');