I am trying to overwrite the GF Orbital Theme styles.
My class: body .gform_widget .gform-theme.gform-theme–framework { … }
The problem that I’m having is that GF output-specific targeting for the form further overwrites my styles. I do not want to use !important, and I want my styles to be global, not form-specific.
#gform_wrapper_1[data-form-index=“0”].gform-theme, [data-parent-form=“1_0”] {}
This code can be found before the form in the HTML.
Is there a way to remove this output? Or how can I overwrite it
I’m using Beaver Builder.
Hi Mihai,
If you’re using a child theme, you can use the same CSS selector to override the default Gravity Forms styles. If you don’t have a child theme, you can use the “Simple Custom CSS and JS” plugin to insert the code.
Both third-party plugins and child themes will prioritize the CSS by default since they load after the Gravity Forms CSS.
I don’t want to use a plugin. That is not the solution I want.
The problem is that the plugin outputs code inside the HTML, not the CSS. It also has a very high specificity targeting the id of that specific form. I want to create a global style so that it does not matter what form I add is going to be styled properly.
You can include the form ID in the CSS selector to make it more nested and have a higher priority for the browser to load.
Convert CSS ID from #gform_1 input to [id^="gform_"] input so it’ll work with any CSS ID started with gform_.
Please keep me posted about the outcome. Thank you 
1 Like
This is a very goo solution. I shall give it a try !
I have updates:
CSS Selector: body [id^=“gform_wrapper_”][data-form-index].gform-theme {
This didn’t really did the trick, as the inline code was still overwriting my CSS. So I looked into the code a bit and if you don’t pass a theme, it does not embed the CSS.
[gravityform id="1 theme=“none”]
Excellent find! Did removing the theme solve your problem, or do you require further assistance?
