Support forumCategory: QuestionsCalendar to follow website theme completely
wojteck asked 3 weeks 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 weeks 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 weeks 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 weeks ago

https://shlykovapsycholog.ru/booking/

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

wojteck replied 3 weeks 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 weeks ago

Nice, I have just checked and it’s looking nice. Do you want to change anything else?

Best regards,
Nikola

wojteck replied 3 weeks 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 weeks ago

if you can try it yourself maybe youll understand me better

wojteck replied 3 weeks ago

Hoping to hear from you Nikola regarding my last issue 🙂

Thanks

wojteck replied 3 weeks 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 weeks 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 2 weeks ago

Nicola attached for you photo of my issue i described in my previous posts. Waiting patiently for your help. Thanks

wojteck replied 2 weeks ago

https://ibb.co/PQnXBKV

wojteck replied 2 weeks ago

https://ibb.co/HBYDpBc

wojteck replied 2 weeks ago

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

wojteck answered 2 weeks ago

wojteck replied 2 weeks ago

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

Nikola Loncar Staff answered 2 weeks ago

Hi, add also this to customs styles:

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

Best regards,
Nikola

wojteck replied 2 weeks 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 2 weeks 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 2 weeks 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 7 days 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 days 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 1 day ago

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