Calendar to follow website theme completely

Support forumCategory: QuestionsCalendar to follow website theme completely
wojteck asked 3 years ago
Nicola I'm very thankful for your reply! Finally got this working thanks to you!   My last question hopefully is there a way to make the entire calendar, and buttons to follow my website theme colors, design, and fonts? I mean colors and Icon shape (Next ,Cancel) including calendar shadow's and borders? I can't do it bymeslf due to my low level of coding skills :)   https://shlykovapsycholog.ru/booking/   Thanks a million Nikola! very much appreciated
7 Answers
Nikola Loncar Staff answered 3 years ago
Hi, add this to custom styles option inside EA Settings > Customize > Custom Styles :
.ea-submit { background-color: #52b02a !important; border-color: #52b02a !important; } .ea-submit:hover { background-color: #3e8121 !important; border-color: #3e8121 !important; }
Best regards, Nikola
wojteck replied 3 years ago

Thank you very much again Nikola!
looks much better now, thanks to you!

but i have a problem now. when i select a date, and time, the selected parameter text cant been read becuase its the same color. Can i make the selected date and time (when selected) to have the text in white?

Lastly the submit and cancel buttons can have the same button shape as my theme?

Thanks a million

wojteck replied 3 years ago

https://shlykovapsycholog.ru/booking/

please try to have a look and try it out when you have the time 🙂

wojteck replied 3 years ago

I also added these following codes to enhance the look more as close as possible to my theme:

.ea-bootstrap a { color: #52b02a !important; }

.ui-datepicker a:hover, .ui-datepicker td:hover a { color: #3E8121 !important; }

.ui-datepicker { background-color: #fff; border: 1px solid #52b02a; border-radius: 4px; box-shadow: 0 0 8px rgb(82 174 42 / 0.6) !important; }

.ea-bootstrap .form-control:focus { border-color: #52b02a; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgb(82 176 42 / 0.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgb(82 176 42 / 0.6) !important; }

Nikola Loncar Staff answered 3 years ago
Nice, I have just checked and it's looking nice. Do you want to change anything else? Best regards, Nikola
wojteck replied 3 years ago

Thank Nikola! 🙂

Now i have a small problem. when i select a date, and time, the selected parameter text cant been read becuase its the same color as the selecetion. Can i make the selected date and time (when selected) to have the text in white?

Lastly the submit and cancel buttons can have the same button shape as my theme?

wojteck replied 3 years ago

if you can try it yourself maybe youll understand me better

wojteck replied 3 years ago

Hoping to hear from you Nikola regarding my last issue 🙂

Thanks

wojteck replied 3 years ago

Lastly i cant seem to align everything to center of my page. i tried modifiying lots of settings in my theme. but didnt achieve what im trying to.

wojteck replied 3 years ago

Hi Nicola

I managed to center the calander finally 🙂

But i still cant sort when i select a date, and time, the selected parameter text cant been read becuase its the same color as the selecetion.

Please help when you have time

wojteck answered 3 years ago
Nicola attached for you photo of my issue i described in my previous posts. Waiting patiently for your help. Thanks
wojteck replied 3 years ago

https://ibb.co/PQnXBKV

wojteck replied 3 years ago

https://ibb.co/HBYDpBc

wojteck replied 3 years ago

First without mouse hover. and second photo with mouse hover.

wojteck answered 3 years ago
wojteck replied 3 years ago

Nikola I am sorry to keep asking but i am desperate to fix my last issue.

Nikola Loncar Staff answered 3 years ago
Hi, add also this to customs styles:
.selected-time:hover { color: white!important; }
Best regards, Nikola
wojteck replied 3 years ago

Hi Nikola

Thanks a million for getting back to me.

the code you provided doesn’t change anything when i applied it.
Current code i have now is:

.ea-submit { background-color: #52b02a !important; border-color: #52b02a !important; }
.ea-submit:hover { background-color: #3e8121 !important; border-color: #3e8121 !important; }

.ea-bootstrap.ea-bootstrap .selected-time, .ea-bootstrap.ea-bootstrap .selected-time:hover { background-color: #52b02a !important; }
.ea-bootstrap a { color: #52b02a !important; }

.ui-datepicker a:hover, .ui-datepicker td:hover a { color: #3E8121 !important; }

.ui-datepicker { background-color: #fff; border: 1px solid #52b02a; border-radius: 4px; box-shadow: 0 0 8px rgb(82 174 42 / 0.6) !important; }

.ea-bootstrap .form-control:focus { border-color: #52b02a; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgb(82 176 42 / 0.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgb(82 176 42 / 0.6) !important; }

.selected-time:hover { color: white!important; }

Nikola Loncar Staff replied 3 years ago

this row here makes conflict with one that I have suggested in last post:

.ui-datepicker a:hover, .ui-datepicker td:hover a { color: #3E8121 !important; }

can you try without that part

wojteck replied 3 years ago

I removed the line: ui-datepicker a:hover, .ui-datepicker td:hover a { color: #3E8121 !important; }

but its still the same Nikola, on hover its showing white font only on time selection (on date its not showing). But both selected Date and time text aren’t showing due to having same color as the block background.

wojteck answered 3 years ago
Nikola thanks for your suggestion. But the code you provided me still didnt solve my issue as you can see in the screenshot below  https://ibb.co/HBYDpBc   If you can please check the colander yourself https://shlykovapsycholog.ru/booking/   Looking forward to your reply!
Nikola Loncar Staff answered 3 years ago
Hi can you please do the next thing:
.ea-bootstrap a { color: #52b02a !important; }
can you please try removing that !important part from it. Best regards, Nikola
wojteck replied 3 years ago

Nicola thanks a million! its now behaving much better and the text is readable.
Thank you!