Change the color of date picker.

Nivedha Y
Tera Expert

Hi,

find_real_file.png

find_real_file.png

Need to know, where to change this date picker and calendar icon color n now mobile app.

1 ACCEPTED SOLUTION

Matthew Peters
Tera Expert

Hi,

 

Sorry if you've already figured this out but I'll post this so other people can customise these colors on the Now Mobile app. There are some CSS files in the 'Webviews for mobile' application scope. You can update a variety of things that the mobile app editor doesn't do.

 

Navigate to sp_css.list and open the record called "mesp-overrides-for-date-picker.css", you can update the color of the icon by changing the .glyphicon-calendar color attribute.

I found it easier to just update the color of .glyphicon so it updates the color of the paperclip icon too.

 

If you want to change the color of the date pickers day selected and the today indicator you will need insert the following code to that same css record:

// This will update the small indicator that appears on the current day.

.bootstrap-datetimepicker-widget td.today:before {
border-bottom: 7px solid red;
}

// This will update the background color of the selected date in the date picker.
.dropdown-menu.bootstrap-datetimepicker-widget td.active div {
background: red;
}

 

Hope this helps whoever else needs to do this in the future.

View solution in original post

6 REPLIES 6

Matthew Peters
Tera Expert

Hi,

 

Sorry if you've already figured this out but I'll post this so other people can customise these colors on the Now Mobile app. There are some CSS files in the 'Webviews for mobile' application scope. You can update a variety of things that the mobile app editor doesn't do.

 

Navigate to sp_css.list and open the record called "mesp-overrides-for-date-picker.css", you can update the color of the icon by changing the .glyphicon-calendar color attribute.

I found it easier to just update the color of .glyphicon so it updates the color of the paperclip icon too.

 

If you want to change the color of the date pickers day selected and the today indicator you will need insert the following code to that same css record:

// This will update the small indicator that appears on the current day.

.bootstrap-datetimepicker-widget td.today:before {
border-bottom: 7px solid red;
}

// This will update the background color of the selected date in the date picker.
.dropdown-menu.bootstrap-datetimepicker-widget td.active div {
background: red;
}

 

Hope this helps whoever else needs to do this in the future.

how about changing the color of that little clock below the calendar???