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

1
  • 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??? Commented Sep 16, 2019 at 15:31

3 Answers 3

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/

3
  • Thanks, I followed that post but it doesn't address my questions. .ms-acal-color1 doesn't exist Commented Jun 4, 2015 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
    Commented Jun 4, 2015 at 21:20
  • I can't because this has to be a global solution Commented Jun 4, 2015 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
  • 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. Commented Mar 16, 2017 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.

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