JP.jpg

Hi.

Welcome to SharePoint Simply. I am a non-technical SharePoint person just like you. Follow along while I learn things and help you do them.

SharePoint: Customize the colors for calendar overlays

Time to do this: 10-15 minutes

In a previous post, I outlined how to use default SharePoint settings to color-code calendars. But plenty of people have wondered "can we edit the colors for those calendar overlays?"

The answer is yes. Here's how to do it, at a high level:

  1. Copy my very basic CSS
  2. Swap out my color values for the ones you want
  3. Upload the new .css file to SharePoint
  4. Paste the file URL into the "Alternate CSS URL" field under site settings

Before you start, you should know that for this to work you'll need to activate the publishing feature on both the site collection and site level. This allows you to use the Alternate CSS URL setting. Here's the walk through video I made in a hot minute to show you the steps. Continue reading to see the step-by-step breakdown.

Step 1: Copy this CSS to your computer

SharePoint calendars have two separate CSS classes (CSS = cascading style sheets - they control the look and feel of things on a web page) that control the colors in SharePoint calendars. One is for the actual calendar event. The other is for the color key in the left-hand column. You'll want to match them together so it all looks good in the end. Here's the CSS you can copy. Just paste it into notepad or Notepad++ and save it with a .css file extension (you can just edit the file after saving and adjust the file extension). Here are some other ways to do it if you don't know how.

.ms-acal-color1 {
    background-color:Orange !important;
}

.ms-acal-apanel-color1 {
    background-color:Orange !important;
}

.ms-acal-color2 {
    background-color:Red !important;
}

.ms-acal-apanel-color2 {
    background-color:Red !important;
}

.ms-acal-color3 {
    background-color:Gold !important;
}

.ms-acal-apanel-color3 {
    background-color:Gold !important;
}

.ms-acal-color4 {
    background-color:Yellow !important;
}

.ms-acal-apanel-color4 {
    background-color:Yellow !important;
}

.ms-acal-color5 {
    background-color:Blue !important;
}

.ms-acal-apanel-color5 {
    background-color:Blue !important;
}

.ms-acal-color6 {
    background-color:Purple !important;
}

.ms-acal-apanel-color6 {
    background-color:Purple !important;
}

.ms-acal-color7 {
    background-color:Gray !important;
}

.ms-acal-apanel-color7 {
    background-color:Gray !important;
}

.ms-acal-color8 {
    background-color:Brown !important;
}

.ms-acal-apanel-color8 {
    background-color:Brown !important;
}

.ms-acal-color9 {
    background-color:#ff2052 !important;
}

.ms-acal-apanel-color9 {
    background-color:#ff2052 !important;
}

You'll notice there are nine color values but 18 CSS classes. Again, that's because there is a class for both the actual calendar item and the category menu in the left-hand column. I've given some very basic values in my CSS example, but you can use any CSS colors here. You can do named colors like I have above for colors 1-8 or you can do hexadecimal values like I did for color nine. Here's a pretty full list of options supported by all browsers.

Note: I've marked all the colors above as !important. SharePoint is really good at ignoring custom code, so this all but ensures your color values will be displayed.

Step 2 - Upload your new CSS file to SharePoint

Now that you've adjusted the colors to be what you want and saved, it's time to get that CSS file into SharePoint. Make sure you've saved it as a .CSS file. It's just easier if you do. I usually use NotePad++ to do this (it's free and pretty sweet). You can upload this CSS file to anywhere in your SharePoint environment. Really you just need the URL for the file. So upload it to a site assets library or a document library and copy the file URL.

Step 3 - Use the "Alternate CSS URL" setting

If you've got the publishing features activated on the site collection and site level, you can do this next step. Go to site settings. Under "Look and Feel" you should see a link that says "Master Page." Click on it. At the bottom you'll see a link for "Alternate CSS URL." Expand it. Select the radio button to specify a particular CSS file. Paste your URL from step 2 into that field. Click OK at the bottom.

Step 4 - Check your work

Go back to your calendar and press Control+F5 or simply refresh the page. You should now see your custom colors applied to your SharePoint calendar.

Things to Know

  • The Alternate CSS URL is a site collection level setting (despite what I may have said in the video...wine.). This means if you have multiple calendars on the same site and use this approach, they will all have your custom colors.

  • SharePoint only gives you the nine color options to work with, so choose your categorization wisely. Or don't, it's up to you.

Questions? Comments? Need help? Shoot me a note.

OneDrive: How to access the ribbon

SharePoint: You can see files but other people can't