Orbital theme CSS variables & selector specificity

Get Help
, ,
1

I’m trying to style a form with the Orbital theme using CSS. I’ve been reading some threads on this forum which suggest that CSS variables are the way to go here. If I’ve been reading things correctly, it should be as simple as:

.gform-theme {
    --gf-color-primary: red;
}

But that doesn’t work for me, because the variables for my form are set on a specific selector:

#gform_wrapper_1[data-form-index="0"].gform-theme, [data-parent-form="1_0"]

This selector is so specific that it’s almost impossible to override the variables without using !important, which I’m trying to avoid.

Am I doing something wrong? Is there a way around this? Have I missed something?

Would appreciate any help.

2

After being in touch with the Gravity Forms support team, who put me on the right track (thanks!), I came up with the following way to style forms globally:

body:has(#gravity_forms_theme_framework-css) .gform-theme--framework.gform-theme--orbital {
    --gf-color-primary: red;
}

Note the body:has(#gravity_forms_theme_framework-css) .gform-theme--framework.gform-theme--orbital selector, which is key to override Gravity Forms’ own selectors. This way, you can style any form in your site without having to use !important.

In the mean time, the team have said they will look into making CSS styling easier. More elegant solutions might be on the way :crossed_fingers:t2: