CODEWITHSUNDEEP
csswordpresscontent-management-system
user3088202
user3088202

Reputation: 3144

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?

Upvotes: 1

Views: 2400

Answers (4)

Siyanda Maphumulo
Siyanda Maphumulo

Reputation: 146

If you are already using a child theme you can override a specific file e.g. footer.php

So you would create a file of the same name in the same directory and copy over the code you need

Upvotes: 1

random_user_name
random_user_name

Reputation: 26170

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');

Upvotes: 2

Nutshell
Nutshell

Reputation: 8537

You forgot a space between .site-title and :not part. Try this instead : 

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

Upvotes: 0

rsilva
rsilva

Reputation: 270

Try adding more specificity to your rule, like:

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

Example: https://jsfiddle.net/robsilva/wx113Lxo/

Upvotes: 0

Related Questions