How to Customize colors of the form?

Support forumCategory: QuestionsHow to Customize colors of the form?
vivian murray asked 7 years ago
I'm not sure if its allowed, but can we edit any of the colours on the form? Such as remove the green around calender dates and times, change button colour and also remove greyed out look of the disabled parts of the form? Any help is much appreciated. Also I'd like to change the word "worker" to something else like "staff" or "engineer" for my particular website.
2 Answers
Nikola Loncar Staff answered 7 years ago
Hi, you can do that with custom css. Can you send me the link to form so I can see what styles have to be changed. Those labels you can change in Settings > Customize page. :) Best regards, Nikola
kloudadmin replied 6 years ago

Can you post the CSS for the different areas of the calendar and form? I’d like to change the color of the active day, open days and closed days.

Nikola Loncar Staff answered 6 years ago

Hi there are couple of classes for styling Calendar :
.no-slots
.ui-state-disabled
.ui-state-active

Best regards,
Nikola

darchard replied 5 years ago

Hi Nikola,
Could you let me know the classes for styling the GDPR check-box please?
Thanks,
David

Nikola Loncar Staff replied 5 years ago

hi paret element is `gdpr` and inside there is a input checkbox and label. You can style it by using that class. Sorry for waiting.

Best regards,
Nikola

darchard replied 5 years ago

Thanks for the answer Nikola. I need to make the ‘check’ of the checkbox to be black and bigger so the customer can see it better. I don’t really know css coding. It would really help if you could give me a short sample of what I should add in the Custom Style box. Thank to so much for your help.

darchard replied 5 years ago

I guess it would also be fine to just have the checkbox background change colour when tt is checked if that is easier. David

Nikola Loncar Staff replied 5 years ago

Hi can you please share the link to that page so I can see what styles needs to apply.

Best regards,
Nikola

darchard replied 5 years ago

Hi Nikola,
I have now fixed the problem with help from my brother. We changed the background colour of the checkbox so the (white) tick was visible by adding the following to the Custom Styles box. Not sure if it’s the best way but it works:-
.ea-bootstrap .radio input[type=”radio”], .ea-bootstrap .radio-inline input[type=”radio”], .ea-bootstrap .checkbox input[type=”checkbox”], .ea-bootstrap .checkbox-inline input[type=”checkbox”]
{
background-color: #507622
}

Nikola Loncar Staff replied 5 years ago

Hi, yes you can do it like that.

Best regards,
Nikola