Support forumCategory: QuestionsHow do I customise the appearance
kyle asked 2 years ago

Hi,
I’d like to know what CSS code is needed to customise the colors and fonts of the calendar widget to match the Theme style of my website. I’ve tried using the inspect function and copying and pasting bits over but it doesn’t seem to be applying

5 Answers
Nikola Loncar Staff answered 2 years ago

Hi Kyle can you please share the link to that page with form?

Best regards,
Nikola

kyle answered 2 years ago

Link to the page is here 
 
https://dluxdetailing.co.uk/bookings/
 
Thanks

Nikola Loncar Staff answered 2 years ago

Hi, try adding this to custom styles at EA Settings > Customize > Custom styles option:

.ea-bootstrap {
    font-family: "Arizonia", Sans-serif !important;
    font-size: 15px !important;
}

.ea-bootstrap a, .ea-bootstrap button {
	font-family: "Arizonia", Sans-serif !important;
	font-size: 15px !important;
}

.ea-bootstrap .ui-datepicker-title {
	color: black;
}

.ea-bootstrap .block {
	background-color: black !important;
}

Best regards,
Nikola

kyle replied 2 years ago

Awesome thank you very much Nokila!

One more question, how do I increase the size of the drop down font?

Nikola Loncar Staff replied 2 years ago

Add this to styles:

.ea-bootstrap select, .ea-bootstrap label {
font-size: 20px !important;
}

also one more thing please check ” signs should be same as before/after font family name
Best regards,
Nikola

Nikola Loncar Staff answered 2 years ago

If you don’t want that font type just remove “Arizonia” from styles 🙂

Best regards,
Nikola

Nikola Loncar Staff answered 2 years ago

Hi Kyle, did you applied those styles?

Best regards,
Nikola