color and table time

Support forumCategory: Questionscolor and table time
Tuonoman asked 6 years ago
Hello
Thank you very much for your plugin, which we will certainly use to reserve places in our small toy library for handicapped children. https://www.handmirable.fr/reservation-ludotheque/ I have several problems
1: the available dates are white, I want them to be orange.
2: On the current date, the timetables are displayed, how to hide them?
Thank you for your help
8 Answers
Nikola Loncar Staff answered 6 years ago
Hi, please add this to custom styles in EA Settings > Customize page:
.ea-bootstrap td a { color: #2A6496; } .ea-bootstrap td:visited, .ui-state-active { color: #fff; } .ea-bootstrap td.ui-datepicker-current-day { background-color: #2A6496; }
Regarding the current date it will open time table automatically. Best regards, Nikola
Tuonoman answered 6 years ago
Hi,  Thanck it works,  So it is not possible to disable the current date?
so you don't have the time table visible? Best regards
Nikola Loncar Staff replied 6 years ago

No, it is auto selected on show. I will see what can be done there.

Best regards,
Nikola

Tuonoman replied 6 years ago

Thanks Nikola

Tuonoman replied 6 years ago

Hi, I have a problem with the arrows “prev and next”
I can’t find the css elements
can you help ?

Tuonoman answered 6 years ago
Hi, I have a problem with the arrows “prev and next”
I can’t find the css elements
can you help ?
Nikola Loncar Staff answered 6 years ago
Hi, your theme is setting white color for almost every link. Class for right arrow is
.ui-datepicker-next
and for previous
.ui-datepicker-prev
Best regards, Nikola
Tuonoman replied 6 years ago

Hi,
I tried that request.

.ea-bootstrap td.ui-datepicker-next {
background-color: #fc7e00;
}
but nothing change

best regards,

Tuonoman answered 6 years ago
that works !! thanks Nikola !!
Nikola Loncar Staff replied 6 years ago

you’re welcome 🙂

Best regards,
Nikola

biosdi answered 5 years ago
Hi Nikola!   How can I change color of the square background (now white) of the date box?
Nikola Loncar Staff replied 5 years ago

Hi, try for example:

.ea-bootstrap .calendar.disabled .block { background-color: red; }

In EA Settings > Customize page > Custom styles

Best regards,
Nikola

biosdi replied 5 years ago

Thanks Nikola! However, it makes the whole calendar red… 🙁

Nikola Loncar Staff replied 5 years ago

Can you please take a screen shot with marked part that you want to change. I will write styles for that after I see it.

Best regards,
Nikola

biosdi replied 5 years ago

Here you are: https://ibb.co/mvi1V0

The best solution would be the red bar across each unavailable date. If unable to write a style for that, the grayed out background would be fine. Thanks

Nikola Loncar Staff replied 5 years ago

CSS Class for that is .no-slots so you can add it to custom styles section like this:

.ea-bootstrap .no-slots.no-slots {
background-color: red;
}

Change red color into anything, this is just for testing purpose. 🙂

Best regards,
Nikola

biosdi replied 5 years ago

Thanks. However, I tried it but nothing changes… 🙁

Nikola Loncar Staff replied 5 years ago

try this:

.ea-bootstrap .no-slots.no-slots.no-slots {
background-color: red;
}

biosdi replied 5 years ago

That worked!! Thanks

And, which CSS Class for available slots, please? Thank again!

Nikola Loncar Staff replied 5 years ago

it’s .free 🙂

Best regards,
Nikola

biosdi answered 5 years ago
And, can I add a legend to explain (e.g.: red=no availability ; blue=date available)?   Thanks a lot  
Nikola Loncar Staff replied 5 years ago

You can do that above shortcode on that page. 🙂

Best regards,
Nikola

federicoblank answered 3 years ago
Hi, this is a wonderful plugin, thank very much for creating it. I have a similar question, I tried using the css that you posted but couldn´t reach my goal. I need to change the color of the active days of the calendar, they are red now, and I´ll like to change it to a different color. I check on the bootstrap css file without any luck, and the same implementing the css stated above. This is the link to the website: https://royaltymedicalgroup.com Thank you in advance!