Change Color for Calendar Overlay in Sharepoint 2010

Hello Everybody,

I'd like to learn how to change the selection of colors available for calendar overlays in Sharepoint 2010.  Could someone please show me how I can create my own colors instead of using the colors provided by Calendar Overlay.   Calendar Overlay Settings
amarelvAsked:
Who is Participating?
 
AndrewSkoraroConnect With a Mentor Commented:
It appears that Microsoft has not made this extendable. I took a look at the ASPx file and the CSS files and cannot seem to make any of the changes work without errors.  You can create a custom style sheet to modify the following styles to change the color output, but you dont have access to the names being displayed.

.ms-acal-color1{
/* [ReplaceColor(themeColor:"Accent6-Lightest")] */ background-color:#fef8d6;
}
.ms-acal-color2{
/* [ReplaceColor(themeColor:"Accent5-Lightest")] */ background-color:#d0ffbc;
}
.ms-acal-color3{
/* [ReplaceColor(themeColor:"Accent4-Lightest")] */ background-color:#feebcd;
}
.ms-acal-color4{
/* [ReplaceColor(themeColor:"Accent3-Lightest")] */ background-color:#c8f0ff;
}
.ms-acal-color5{
/* [ReplaceColor(themeColor:"Accent2-Lightest")] */ background-color:#ffc8e8;
}
.ms-acal-color6{
/* [ReplaceColor(themeColor:"Accent1-Lightest")] */ background-color:#bee5ff;
}
.ms-acal-color7{
/* [ReplaceColor(themeColor:"Dark2-Lightest")] */ background-color:#e0e8f2;
}
.ms-acal-color8{
/* [ReplaceColor(themeColor:"Light2-Lightest")] */ background-color:#d9dde1;
}
.ms-acal-color9{
/* [ReplaceColor(themeColor:"Light1-Lightest")] */ background-color:#f2f2f2;
}
0
 
amarelvAuthor Commented:
Thank you AndrewSkoraro for trying to work with me on this issue.  I greatly appreciated your quick reply. Is it possible to make the changes in SharePoint Designer 2010?
0
 
AndrewSkoraroCommented:
You can create a custom style sheet in SharePoint designer.  Follow the details at this link.

http://office.microsoft.com/en-us/sharepoint-designer-help/apply-a-custom-style-sheet-to-a-sharepoint-site-HA010169174.aspx
0
 
amarelvAuthor Commented:
I was able to change the selection of colors in the Calendar Overlay by inserting a content web editor and adding my own <style>..</style> elements to the page.  Please see screen shot below.  I now have an issue where the original colors (listed Calendars) do match with my "new" colors. (the dates) Could you please show me how to change so my listed Calendars will correlate with my new colors?
Colors Calendar Overlay
0
 
amarelvAuthor Commented:
Thank you so much for all of your help!  It was greatly appreciated.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.