Best Practice or Suggestion for Overiding Orbital Styles when using a page builder

General Discussion
1

We’re using Breakdance to build sites recently and using Gravity Forms instead of the built-in forms.

What are people doing to add styling to override the Orbital theme with their brand colors and styles?

Right now I’m adding a CSS stylesheet to the site that uses Breakdance form variables to override the v2.5 or Orbital styles. That way, the designer styles a Breakdance form visually and then the styles are applied to the Gravity Forms.

Is there a better way to do this?

A lot of the existing documentation has classes for non-orbital classes.

Is there a list of -gf variables or orbital classes that I could start from instead?

There’s a whole lot of !important everywhere to get things to work…

thanks,

2

So after reading more posts, specifically this one, is this where we’re still at in 2026?

Option 1: PHP Filter using JSON formatting for über basics that could be styled when using Block editor. With a page builder, this option doesn’t make a lot of sense if you don’t need a theme.json. For a custom theme, I get going the JSON route.

Option 2: Dig for classes and overwrite using the new Gravity Form variables for the Orbital theme?

Again, the explanation by the developer in the linked reply about integrating with the Block editor makes sense to use variables.

I’d just love some sort of starting list of variables to overwrite as a base to cover basic styles for inputs, buttons (next/previous too), progress bar, radio/checkbox background, outline color, etc.

My gform.css stylesheet at the moment mostly the old 2.5 classes from the documentation, and then some attempts at the new Orbital framework classes and -gf variables.

3

Hi @aaronvg and welcome! Love and appreciate your interest in Orbital and figuring out how to work with and customize it.

We have been in the process of getting proper documentation written up for folks to offer a more clear and helpful starting place and reference for how to go about tinkering with Orbital. You know how that goes, needless to say it’s taken longer than expected.

Chris (customer support team) and I (product team) have been actively working on updating/adding to the docs offered here as well as creating a new documentation site just for Orbital and specifically the CSS API. I still need to write up some documentation for the standalone site, but have the CSS API itself documented, which is helpful.

I plan to publish that next week. I’ll chat with Chris and see where things are at on his end and circle back to you next week with links. I’ll also be happy to work with you on customizing your form theme as it will in turn help me in writing the additional documentation needed.

Thanks for reaching out, I’ll be in touch. Have a great weekend!

4

Hey @ryanurban ,

Thank you taking time to reply. I’m interested in reading the updated documentation.

After reviewing more of the existing docs, I was able to get the forms for my projects styled. Some is a hodgepodge with some older selectors and some using the newer orbital framework :sweat_smile:

The CSS API sounds the most intriguing, since some sites we’re building aren’t using the block editor. Is it possible to overwrite some top-level variables that would cascade across any other variables using them? Something like this?

.gform-theme--framework {
  --gf-color-primary: lightgreen;
}

When I tried this, the default blue color for Orbital still had precedence (won) over the my variable overwrite without an !important tag.

It sounds promising that there may be a way to overwrite several GF variables, without having to use !important tags to style each element.

If the CSS variables approach is recommended, it would be nice to see the variables method used in place of the static border: 1px red solid;

Thanks!

5

I thought I’d share a progress update. After digging through lots of GF variables for a new project, I was able to cut down the CSS from a previous project that had 250 lines to under 50 lines for a few basic forms, simply by overriding the variables. Here’s an example of what I ended up doing:

I’m using Breakdance Page Builder, so other variables assign some variables :laughing:

.gform-theme--framework {

  /* Colors */
  --gf-color-primary: var(--bde-button-primary-background-color) !important;
  
  /* Buttons */
  --gf-ctrl-btn-font-size: 18px !important;
  --gf-ctrl-btn-radius: 20px !important;
  --gf-ctrl-btn-text-transform: uppercase !important;
  --gf-ctrl-btn-font-weight: 700 !important;
  --gf-ctrl-btn-padding-y: 14px !important;
  --gf-ctrl-btn-padding-x: 24px !important;
  
  /* Inputs */
  --gf-ctrl-label-font-size-primary: 18px !important; 
  --gf-ctrl-font-size: 18px !important;
  --gf-ctrl-outline-color-focus: color-mix(in srgb, var(--bde-button-primary-background-color) 50%, transparent) !important;
  --gf-ctrl-radius: 30px !important; /* var(--bde-form-input-border-radius */
  --gf-ctrl-btn-bg-color-hover-primary: var(--bde-links-color-hover) !important;
  --gf-ctrl-label-color-primary: var(--bde-button-primary-background-color) !important;
  --gf-color-in-ctrl-primary: var(--bde-button-primary-background-color) !important;
  --gf-ctrl-textarea-radius: 20px !important;
  --gf-ctrl-padding-x: 14px !important;
  --gf-ctrl-padding-y: 24px !important;
  --gf-ctrl-shadow: none;
  
  /* Borders */
  --gf-ctrl-border-color: var(--bde-form-input-border-color) !important;
  --gf-ctrl-border-width: 2px !important;

}

.gform-theme--framework .gform_confirmation_message {
  color: #FFFFFF;
  background-color: var(--bde-button-primary-background-color) !important;
  border-radius: 30px;
  padding: 14px 24px;
}

This is definitely NOT exhaustive and only covers simple forms with few elements. I hope to be able to build a longer list of variables to start from with each new site.

I know it’s a lot of !important tags. It’s possible those may not be required if I enqueued the CSS in a plugin, instead of directly through Breakdance. I hope this list is helpful for people getting started.

6

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

7

Awesome, thanks for sharing your progress @aaronvg! You are on the right track and things are looking good! I’ll take a deeper look next week and get back to you, in particular on cleaning up the !important. If you are able to, I’d love to check out your site and look things over if you can share the link.

Finally, I just got v1 of the CSS API docs published, you can find them here: https://docs.css.gravity.com/

And in the past couple of weeks we’ve also added and updated a fair bit of documentation on our main docs site as well. The CSS API docs site references those a fair bit. V2 will have more extensive coverage for overview, methodology, and best practices, but v1 should provide helpful mileage even purely as a reference with it’s organization in conjunction with the other documentation.

Have a great weekend and I’ll circle back next week!