cancel
Showing results for 
Search instead for 
Did you mean: 

Easy way to override inherited stylesheet

Community Veteran
Posts: 38,460
Thanks: 1,030
Fixes: 62
Registered: 15-06-2007

Easy way to override inherited stylesheet

This may seem odd but using a wordpress theme I want to override the theme font styles <h1>, <h2>, etc in the Child theme CSS

Now I can do this by adding

h1{font-family: Microsoft Sans Serif, Arial, Sans-serif;font-size: 24px;font-weight: 400;font-style: normal;color: #063189;letter-spacing: 0px;margin-bottom: 10px;margin-top: 10px;}

with !important after every item but it is possible to add a single one which will give all the items the !important attribute

4 REPLIES
Community Gaffer
Community Gaffer
Posts: 3,315
Thanks: 2,048
Fixes: 74
Registered: 22-02-2016

Re: Easy way to override inherited stylesheet

Try to avoid using !important in your stylesheet as it might cause issues when you go to override it again in the future.

You can either insert a new style after the H1 and it will override it due to the cascading nature:

 

h1{
    /* old style is here */
}

h1{
    /* new style is here */
}

Or your other option is to insert an ID into the style declaration. Having an ID will take precedence over everything. If the ID is applied to the body tag than it should catch all instances of the style you want to override.

 

 

#IDOFSOMETHING h1{

}

So for example, on these forums there is an ID on the body tag called 'lia-body'. Applying this ID to an existing bit of CSS will override anything above or below it. Using an ID will also override any classes. Personally, I'd use a class instead of an ID. In the below example, the H1 will always show as red because an ID has been used and it takes priority over everything:

h1{
    color: green;
}

#lia-body h1{
    color: red;
}

h1{
    color: blue;
}

.lia-board h1{
    color: black;
}

 

Frontend Web Developer | www.plus.net

If you have an idea to improve the community, create a new topic on our Community Feedback board to start a discussion about your idea.

Community Veteran
Posts: 38,460
Thanks: 1,030
Fixes: 62
Registered: 15-06-2007

Re: Easy way to override inherited stylesheet

I am not too concerned about future overrides in the style sheet as I would just change it

The problem is that the parent theme CSS is messy with the various attributes of the font scattered over multiple definitions and is liable to change when the theme gets updated

Would a better option be the enqueue command in the php file as suggested here https://codex.wordpress.org/Child_Themes

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

 

Community Gaffer
Community Gaffer
Posts: 3,315
Thanks: 2,048
Fixes: 74
Registered: 22-02-2016

Re: Easy way to override inherited stylesheet

I am not overly familar with wordpress as such to know what to do with that.

Do you have a stylesheet to override existing styles? If this override stylesheet is loaded after the main theme and other child themes then it is possible to simply override it by declaring the CSS by using an ID.

Frontend Web Developer | www.plus.net

If you have an idea to improve the community, create a new topic on our Community Feedback board to start a discussion about your idea.

Community Veteran
Posts: 38,460
Thanks: 1,030
Fixes: 62
Registered: 15-06-2007

Re: Easy way to override inherited stylesheet

The ID option probably isn't too useful in this context as I need to override the whole page including header, footer and menu

That order of loading is what the enqueue php command does so I will dig further into that option