Change Blue Date Color

Support forum › Change Blue Date Color

Ronan Ward asked 3 years ago

Hi Firstly, love the Plugin! Can you send me some custom code to change the colour of the 'blue dates' on the calendar to my theme #FF6949 colour. Also, the 'Submit Button' and 'Blue Glow Effect' around the boxes could change to #FF6949 that would be great too. WEBSITE
https://aasafetytraining.ie/manual-handling/

4 Answers

-1 Vote Up Vote Down

Nikola Loncar Staff answered 3 years ago

Hi add this to custom styles inside EA Settings > Custom styles:

.ui-datepicker .ui-datepicker-current-day { background-color: #FF6949 !important; } .ui-datepicker { border: 1px solid #FF6949 !important; box-shadow: 0 0 8px rgb(255 105 73 / 60%) !important; } .ea-bootstrap .btn-primary { background-color: #FF6949 !important; border: 1px solid #FF6949 !important; } ea-bootstrap .btn-primary:hover { background-color: #a64632 !important; }

Best regards, Nikola

ronanward Staff replied 3 years ago

Excellent Nikola, thank you.

Is there more code available to turn all the remaining Blue colour to the #FF6949..?

https://aasafetytraining.ie/manual-handling

ronanward Staff replied 3 years ago

These bits…https://snipboard.io/DVaGzr.jpg

ronanward Staff replied 3 years ago

And these dates.. https://snipboard.io/YcxXzL.jpg

0 Vote Up Vote Down

Nikola Loncar Staff answered 3 years ago

Hi, please add also this to custom styles: .ea-bootstrap a { color: #FF6949; } Best regards, Nikola

0 Vote Up Vote Down

ronanward Staff answered 3 years ago

Thank you Nikola.

ronanward Staff replied 3 years ago

Nikola, I’d love to get these fields (EMail, Name, Phone, Description) in the customer color also, rather than the blue.

https://snipboard.io/UiKVcT.jpg

ronanward Staff replied 3 years ago

i.e. ‘Blue Glow Effect’ around the boxes could change to #FF6949

0 Vote Up Vote Down

Nikola Loncar Staff answered 3 years ago

Hi, add also this :

.ea-bootstrap select:focus, .ea-bootstrap input:focus, .ea-bootstrap textarea:focus { box-shadow: 0 0 8px rgb(255 105 73 / 60%) !important; border: 1px solid rgb(255 105 73) !important; }

Best regards, Nikola