I’m wondering what the best was is to overwrite the Divi WordPress theme CSS styles. I have A LOT of CSS to overwrite. Ideally I’d create a custom theme but it’s been specified to me that it has to be done with Divi. Primarily so widgets can be added by staff as the site grows.
It’s probably worth noting I am using a child theme of the Divi theme.
I thought this would be easy enough using “Appearance” > “Editor”, then just type my own CSS. But anything I type, for example:
body {
font-family: "Acumin Pro Condensed", Helvetica, Arial, Sans-serif;
}
Is overwritten by the styles specified in “Themes” > “Customise”. There is a “Additional CSS” option in here but it’s a 300px wide box which is going to me a pain to use for the volume of CSS I need to write, not to mentioned maintain. But I don’t want to add !important
to overwrite everything in “Appearance” > “Editor” either.
What are peoples thoughts/ideas on this?
2
Answers
Never use css in the customizer and always make a child theme to group your own css.
If any value is save within the theme customizer, delete it in the database…
In the admin area of your site, on the left hand side go to:
Divi > Theme Options
Scroll all the way down past all the options and you will see a “Custom CSS” section. You can add your css here and it will overwrite the defaults. It will also be preserved here throughout all future theme updates.