Some styles such as the h1, h2, h3, etc. are being overridden by my theme. Is it possible to either:
(a) add a section under the Advanced tab that would accept custom CSS, or
(b) have an option such as a checkbox next to each style setting that would add an !important attribute so it would override the default theme setting.
For the most part, I can style everything I need use CSS in my theme settings, however, in some cases I would like to override a style for a particular page.
If there’s another method already being used, please let me know. Thanks!
Actually, under the advanced tab on a row/column/module, you can add an additional class. You can then target that specific class for your custom CSS. Take note though that the class is placed a few layers above the actual element.
I realize I can add a class for each module. What I wanted to know if is there is a space for me to enter the custom CSS so that I can see it live while I am building the site. Having to enter the CSS in the stylesheet and then reloading the stylesheet and reloading the page isn’t very productive.
This again goes to my question on whether there’s a way to override the theme styles on the fly.
Unfortunately, there is no such space inside the Page Builder. You can do so when in the theme customizer but I guess that’s a different story. We already have a feature request for Per Page Custom CSS so you might want to check/vote for that.
I, personally, just use the element inspector in Chrome. You can easily add additional CSS rules and this is what I use to check for specificity(whether or not my rule will override the theme’s). Sorry I don’t have a better answer for you.
Thanks for sharing! I also use a Chrome Extension called Live CSS Editor but I didn’t want to recommend it since I think it doesn’t follow CSS specificity. Hopefully, that plugin does.
