Forminator Plugin – Datepicker field – Custom CSS

  • Resolved Muggles

    (@muggles)


    5 years, 9 months ago

    Hi all 😀

    I wonder if someone can help me with something here please?

    The theme for my site is Storevilla (https://accesspressthemes.com/wordpress-themes/storevilla/)

    I’m using Forminator (https://ww.wp.xz.cn/plugins/forminator/) to make my forms on my website – stunning plugin FYI. I have an issue with the background colour of the arrows on the datepicker field. They are currently blue and I need them to be green to match the rest of my website.

    After checking out all the options for changing the appearance of the form within Forminator, I couldn’t find where this blue was coming from so resorted to inspecting the element and I found the specific code that governs this to be:

    .forminator-custom-form-421.forminator-calendar–default .ui-datepicker-header .ui-corner-all {
    background-color: #17A8E3;
    color: #FFFFFF;
    }

    Still using the inspect tool, I changed the background colour to #017f01 which is the colour I want it to be and it worked beautifully. So I copied the code and put it into my Custom CSS plugin so that it would display correctly. Saved the Custom CSS, refreshed the form and when I got back to the datepicker field (it’s on page 3 of the form), the arrows are back to blue again 🙁

    I’ve tried adding “!important” after the colour. That fixes the arrows but messes up a whole lot of other stuff on the form. I have a screenshot to show what it does but I can’t post that here unfortunately.

    The best I can come up with is that the wp admin theme color setting (which is blue) is overwriting my Custom CSS change, but I don’t know how to fix/change that or alternatively change the wp admin theme colour setting completely.

    Does anyone have any suggestions / solutions for me?

    Thanks so much in advance 🙂

    Regards
    Sara

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Amin – WPMU DEV Support

    (@wpmudev-support2)

    5 years, 9 months ago

    Hello @muggles ,

    Thank you for your question. Can you try this code:

    .forminator-custom-form-421.forminator-calendar--default .ui-datepicker-header .ui-corner-all .ui-datepicker-next.ui-corner-all,
.forminator-custom-form-421.forminator-calendar--default .ui-datepicker-header .ui-corner-all .ui-datepicker-prev.ui-corner-all {
background-color: #017f01;
}

    It should work without the import because it’s more specific selector, however, even if the import directive will be needed then it shouldn’t change other things in the form.

    Let us know how it works.

    kind regards,
    Kasia

    Thread Starter Muggles

    (@muggles)

    5 years, 9 months ago

    Hi, thanks for the speedy response, I tried this new code, both with and without my original code mentioned in my post but in both instances the arrows are still blue.

    I’m not sure if it is related or not but when you go the the Shop or Bookings tab on my menu and you select one of the sub-menu options and move the mouse away, then the sub-menu tab that you selected also goes blue. I can’t pin point what code is causing this but I think it may be related as it is the same blue.

    That is what led me to the wp admin theme colour possibility as the only place that blue is mentioned that I can find when inspecting the elements is regarding the wp admin theme colour.

    As I said, don’t know if it has anything to do with the problem or not, but rather too much info than too little right… 🙂

    Any other suggestions?

    Thanks again for trying to assist.

    Regards.
    Sara

    Predrag – WPMU DEV Support

    (@wpmudev-support1)

    5 years, 9 months ago

    Hi Sara,

    It seems that there’s small mistake with one of the classes in the above code, can you try using this one instead and let us know if it did the trick:

    body .forminator-custom-form-421.forminator-calendar--default .ui-corner-all .ui-datepicker-next.ui-corner-all,
body .forminator-custom-form-421.forminator-calendar--default .ui-corner-all .ui-datepicker-prev.ui-corner-all {
	background-color: #017f01;
}

    Cheers,
    Predrag

    Plugin Support Dimitris – WPMU DEV Support

    (@wpmudev-support6)

    5 years, 9 months ago

    Hello @muggles

    I’m closing this topic due to recent inactivity.
    Feel free to post back any updates and we can reopen it and carry on. 🙂

    Take care,
    Dimitris

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Forminator Plugin – Datepicker field – Custom CSS’ is closed to new replies.