Theme is overriding forminator css

  • Resolved kofukankarateaustralia

    (@kofukankarateaustralia)


    2 years, 3 months ago

    Hi, I have a problem where it seems my theme CSS is overriding the Forminator CSS, including any custom CSS.

    This issue has been raised before in this thread but no solution published. It has also been raised in this thread where some custom CSS was provided to fix the drop-down background color only.

    The form in the link is a simple Contact form, however I am creating a much larger multi-page form with a range of field types.

    I am using the Hello Elementor theme but have also switched to Twenty Twenty-Two and the theme overrides the Forminator CSS in both cases.

    My Contact form didn’t used to have this problem when I created it. It had the Forminator CSS with some colors customized through the form settings. I noticed the CSS being overridden in my new form, so went back to my Contact form to see what the differences were, but re-saving the form must have refreshed something and now all the CSS for the Contact form is overridden as well.

    I would be happy to add a few rows of CSS into the customizer (as per the drop-down background fix linked above) but I can’t decipher which CSS to actually modify.

    In particular I was to modify the following:
    – Next/Back/Submit buttons need to be buttons are currently transparent but need a solid fill
    – dropdown backgrounds are transparent but need a solid fill – the thread linked above fixed this for regular drop downs but not for the date field which has Day Month Year drop downs.
    – Error messages need to be more prominent with background and text color.

    Any help on preventing Forminator CSS be overridden or at least providing clues as to customizing the CSS for the three areas above?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 16 through 18 (of 18 total)
  • Thread Starter kofukankarateaustralia

    (@kofukankarateaustralia)

    Hi Kris

    I am sorry, I was further playing with the form and locked it out for non-logged in users.

    For convenience I have added three “test” fields to the top of the form to examine, a date with dropdowns, a drop down field, and a radio button field.

    https://kofukankarateaustralia.com/kofukan-tournament-registration/

    The other Forminator form on the website is just a simple contact form: https://kofukankarateaustralia.com/kofukan-australia/contact/

    I guess the conflict could be caused by Elementor rather than the theme. When I go to Site Settings within the Elementor page builder I can change the Forminator form styling to some extent – eg you can see that I’ve made the “submit” button gold.
    However within the Elementor settings I have checked the option “Checking this box will disable Elementor’s Default Colors, and make Elementor inherit the colors from your theme.”

    Lindon

    Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    Hi @kofukankarateaustralia

    Thank you for the forms,

    I can see Kris sent an email yesterday, could you please follow up there?

    I also created a small CSS to fix some of the issues, but we would need to extend it if there are more problems:

    /** Fix dropdown z-index **/
.forminator-ui.forminator-custom-form[data-design=default] select.forminator-select2+.forminator-select{
    z-index: initial;
}

/** Dropdown list **/
.forminator-select-dropdown .select2-results__option--selected,
.forminator-select-dropdown li:hover{
    background: red;
    color: #fff;
}

/** Checkbox fix **/
.forminator-row input[type="radio"]:checked + .forminator-radio-bullet:before{
    background: red;
}

/** Pagination color **/
.forminator-step-dot{
    background: #ddd
}

.forminator-current .forminator-step-dot{
    background: red;
}

.forminator-break{
    background: red;
}

    You can add to WordPress > Forminator > Form > Appearance > Custom CSS.

    Best Regards
    Patrick Freitas

    Plugin Support Amin – WPMU DEV Support

    (@wpmudev-support2)

    Hello @kofukankarateaustralia ,

    We haven’t heard from you for a while now, so it looks like you don’t need our assistance anymore.

    Feel free to re-open this ticket if needed.

    Kind regards
    Kasia

Viewing 3 replies - 16 through 18 (of 18 total)
  • The topic ‘Theme is overriding forminator css’ is closed to new replies.