DatePicker css

Resolved bigbatt
(@bigbatt)

4 years, 11 months ago

Hi, guys,

I have a little problem with the css datepicker.
Is it possible to have illustrated the CSS IDs and classes to change it in the style of my theme?

Any help is appreciaded
Regards

The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

Thread Starter bigbatt
(@bigbatt)

4 years, 11 months ago

I need help please bump!!!

gatopinches
(@gatopinches)

4 years, 11 months ago

I had the same problem and was able to work around it with this custom css placed in the page that holds the form:

input, textarea, select, .seldiv, .select2-choice, .select2-selection–single {
display: block !important;
font-size: 14px !important;
line-height: initial !important;
margin: 9px 0px 0px 0px !important;
padding: 10px 15px 10px 15px !important;
border-style: solid !important;
border-radius: 2px !important;
font-weight: normal !important;
border: 1px solid transparent !important;
margin-top: -3.8em !important;
max-width: 92%;
min-width: 92%;
}

.um .picker__month {
margin-top: 1em;
}

it’s not been sanitized so, maybe, some of the operators might not be needed and there’s no way to tell if they’ll work for your template, but it wouldn’t hurt to give it a try since the arrangement of elements in your screenshot is pretty similar to what I was having.

Hope it helps!
Thread Starter bigbatt
(@bigbatt)

4 years, 11 months ago
Hi @gatopinches

Thank you very much, it helped me a lot to solve the problem
I’ve fixed some details and belowe here the CSS, may help others.

Thanks again
```
/* UM Datepiker fix */
.um .picker__day, 
.um .picker__weekday {color:#555 !important;}
.um .picker__weekday {font-size:12px !important}
.um .picker__day--outfocus {color:#999999 !important}
.um .picker__day--infocus:hover, 
.um .picker__day--highlighted, 
.um .picker__day--outfocus:hover {color:#ffffff !important}
.um .picker__button--today,
.um .picker__button--clear {color:#ffffff !important;font-size:14px !important;}
.um .picker__button--close {background-color:#719430 !important; color:#fff !important; padding: 10px 10px 10px 10px !important; border: 0px none !important;border-radius: 2px 2px 2px 2px !important;}
.um .picker__month {margin-top: 1em;}

.um .picker input, 
.um .picker textarea, 
.um .picker select {
display: block !important;
font-size: 14px !important;
line-height: initial !important;
margin: 9px 0px 0px 0px !important;
padding: 10px 15px 10px 15px !important;
border-style: solid !important;
border-radius: 2px !important;
font-weight: normal !important;
border: 1px solid transparent !important;
margin-top: -4em !important;
max-width: 92%;
min-width: 92%;
}
```
https://www.bigbatt.it/images/bb-datepicker-mod.jpg

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘DatePicker css’ is closed to new replies.

Tags