2

I would like to change a couple of the 9 OOB colours for our SharePoint calendar overlays. I can do that by overriding the calendar CSS classes.

The parent calendar div does not get this class assigned as expected:

.ms-acal-color1

Instead it gets this class only:

.ms-acal-item

...which every overlay div has so i can't override the top one without explicitly defining each other class (.ms-acal-color1 - .ms-acal-color9)

Also, I'm not sure how to change the names in this drop down to match the new colours:

enter image description here

  • When I add the script to the webPart above the calendar, It changes the color fine BUT it takes away my calendar ribbon options. (Events, Calendar) Any ideas how to keep the ribbon from disappearing??? – LiLRedDalek22 Sep 16 at 15:31
2

Currently changing the colors listed in the drop down box within one site theme is not available, both in SharePoint Online and SharePoint

.ms-acal-color# {
 BACKGROUND-COLOR: #xxxxxx
}
.ms-acal-selcolor# {
 BACKGROUND-COLOR: #xxxxxx
}
.ms-acal-apanel-color# {
 BORDER-COLOR: #xxxxxx;
 BACKGROUND-COLOR: #xxxxxx;
}

The above 3 classes of styles represent one color.So to change color you have to change above CSS

http://davidlozzi.com/2012/06/20/customize-the-sharepoint-calendar-colors/

  • Thanks, I followed that post but it doesn't address my questions. .ms-acal-color1 doesn't exist – Michael Colbs Jun 4 '15 at 21:09
  • Ok Can you just go to your color coded calendar.Edit that page and add HTML Form webpart and inside <style type=text\css></style>.Add following CSS – Amit Kotha Jun 4 '15 at 21:20
  • I can't because this has to be a global solution – Michael Colbs Jun 4 '15 at 21:29
1

Ok Can you just go to your color coded calendar.Edit that page and add HTML Form webpart and inside <style type=text\css></style>.Add following CSS

.ms-acal-color3{
 BACKGROUND-COLOR: #C0362C
}

.ms-acal-selcolor3{
 BACKGROUND-COLOR: #C0362C
}

.ms-acal-apanel-color3{
 BORDER-COLOR: #C3B7AC; BACKGROUND-COLOR: #C0362C;
}

.ms-acal-color4{
 BACKGROUND-COLOR: #816C5B
}

.ms-acal-selcolor4{
 BACKGROUND-COLOR: #816C5B
}

.ms-acal-apanel-color4{
 BORDER-COLOR: #C3B7AC; BACKGROUND-COLOR: #816C5B;
}

.ms-acal-color8{
 BACKGROUND-COLOR: #668D3C
}

.ms-acal-selcolor8{
 BACKGROUND-COLOR: #668D3C
}

.ms-acal-apanel-color8{
 BORDER-COLOR: #C3B7AC; BACKGROUND-COLOR: #668D3C;
}

.ms-acal-color9{
 BACKGROUND-COLOR: #007996
}

.ms-acal-selcolor9{
 BACKGROUND-COLOR: #007996
}

.ms-acal-apanel-color9{
 BORDER-COLOR: #C3B7AC; BACKGROUND-COLOR: #007996;
}

See if any changes are getting reflected

  • 1
    I believe you meant to say <style type=text/css></style> rather than <style type=text\css></style>. The direction of the slash is significant. – jamesnotjim Mar 16 '17 at 19:54
0

Here's the way you set it up, using color1 as an example:

.ms-acal-apanel-color1, 
.ms-acal-color1 {
    background-color: #f19d00; // Orange;
}

This will change it both in the "Calendars in view" section of the Quick Launch and on the calendar itself. It took a bit of experimenting with the Web Inspector to nail it down. You can deploy an entirely new color scheme by creating a similar class for each color.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.