Overriding Parent style.css file

[Jackcoldrick]

Hi Guys,

I’m trying to overwrite the styles within the Dante style.css file. However I’m not sure I’m going about it the right way and wondered if you’d be able to advise me on the best way to do this…

Basically anything I want to override in the Dante Child theme I’ve to add a !important which isn’t exactly best practice and I’d like to avoid this if possible.

For example:

When I inspect a <p> tag on my page I notice this in the console:

body, p, #commentform label, .contact-form label {
    font-size: 14px;
    line-height: 22px;
}

Then when I go into my style.css file in the child theme I add the following: (notice the !important)

body, p, #commentform label, .contact-form label {
    font-size: 16px !important;
    line-height: 26px;
}

Am I doing this correctly? I’ve also noticed that the above CSS is output in a style tag within the page head. Could you explain this please?

Thanks as always for any help you can provide. I just want to make sure I’m doing everything by the book so that later on in the build it will be easy to make changes. Ideally I’d like to set the styles of the h1, h2, h3, p tags throughout the site.

[David Martin – Support]

Hi Jack,

I would avoid doing this, is there a possibility you can use a child theme? If so it will be update proof and the new CSS will not need the !important tag added.

– Are you adding that custom CSS to the theme options? – If so, that is output inline in the header as mentioned.

Thanks,
David.

[Jackcoldrick]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please always insert all custom css code at Admin -> Theme Options -> Custom CSS. Its best practice.
Thanks
Mohammad

[Jackcoldrick]

Ok, but if that is the case what is the style.css file for in the dante child root directory?

[David Martin – Support]

Hi Jack,

That output CSS is the dynamic color options chosen from the WP Customiser. These custom color options overwrite the default color pallette set in the stylesheet.

I think the best rule of thumb is:

– Small CSS changes belong in the theme options CSS panel.
– Large scale CSS customisations belong in the child theme CSS.

If you are encountering issues overriding the CSS, please privately add your WP login details so we can take a look.

Thanks,
David.

[Jackcoldrick]

That’s great thank you for the help

[David Martin – Support]

No problem, happy to help.

– David.