Overwrite Styles

Get Help
,
1

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.

2

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.

3

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.

Screenshot 2024-04-23 at 2.02.06 PM
Screenshot 2024-04-23 at 2.02.06 PM837×844 189 KB

4

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:

1 Like
5

This is a very goo solution. I shall give it a try !

6

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”]

7

Excellent find! Did removing the theme solve your problem, or do you require further assistance?

meme-think-gif

8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.