Docs

[bielenstein]

Dear all,

I currently have some Gravity Forms styling issues in X Theme, which I cannot solve on my own…

Currently one of my forms shows up as depicted below. What I am trying to get is the following (for exactly that one form, not for the other forms used in the website):

1. The submit button shall also be included in the grey box (with the same left-side padding as the other box contents).
2. The field labels should be written in bold letters.
3. The complete form, which is currently aligned to the left side of the surrounding X Forms column, should be horizontally centered.

Currently I have inserted the following CSS code in the Customizer (unfortunately I’m not an CSS expert, so I have assembled this code from examples found in the forum):

body .gform_wrapper .top_label input.medium, body .gform_wrapper .top_label select.medium, body .gform_wrapper .top_label li.gfield.gf_left_half, body .gform_wrapper .top_label li.gfield.gf_right_half {
clear: none !important;
}

body #gform_wrapper_4 .gform_body .gform_fields {
background-color: #CCCCCC;
width: 50%;
border: 1px solid #888888;
border-radius: 8px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px
}

So, can you give me some advice on which amendments I need to add to my CSS code? Thank you so much in advance!!

Best regards,
Holger

(I am using the most current versions of WordPress, X Theme and Gravity Forms.)

[bielenstein]

This reply has been marked as private.

[Christopher]

Hi there,

Please update this code :

body #gform_wrapper_4 .gform_body .gform_fields {
    background-color: #CCCCCC;
    width: 50%;
    border: 1px solid #888888;
    border-radius: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

to :

form#gform_4 {
    background-color: #CCCCCC;
    width: 50%;
    border: 1px solid #888888;
    border-radius: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

Add this ode as well :

label.gfield_label {
    font-weight: 900 !important;
}

Hope it helps.

[bielenstein]

Wow, that’s awesome! Thanks a lot, Christopher!

[Friech]

You’re more than welcome, glad we could help.

Cheers!

[Author]

Posts