Hi Jean, in the description for this video I call that out and link to the file with the CSS I'm referencing. Here it is again: www.spsimply.com/home/2018/6/2/sharepoint-customize-the-colors-for-calendar-overlays
Hey, I tried to follow the instructions. Oddly enough, when I go to modify the overlay and go to the color dropdown list, it shows my custom colors as mini thumbnails. However, when I select it, the colors remain the same as the old set of colors I was trying to replace on the calendar.
Joe, thank you for the video and CSS. I tested it in my SharePoint site. I can see the new colors in calendar overlay view, but when I switch to each view calendar, the color goes back to the default color. Are there any way to keep the custom color after switching to the individual view calendar?
Hi Joe. I'm trying to follow your instructions, but I'm not able to access your CSS file. The link you provided is not working. I'm only getting an error that the site can't be reached.
Is there a way to change color of the text in the calendar? Both the title and the description of a calendar post. For example, I would need black text and a bright background mayby lightgray or white.
Yes, you can use that alternate CSS file to target the text for the title and description as well. The classes you need to target involve .ms-acal-sdiv a, .ms-acal-mdiv a, .ms-acal-ddiv a if you want to cover both the time and the title.
@@JoePreiner Thanks for the answer!! One more thing I thought about. Is it necessary to create "overlay calendars" to be able to change colours or can I change the "default calendar"s colours? Because that would be really awesome in my case.
@@Stufman You can change the default color, but that just means instead of being blue, it's going to be whatever new color your choose. If you want multiple colors, the easiest way to achieve that is to use the overlay functionality. By default a SharePoint calendar currently only has one color for events.
@@JoePreiner I have followed your instructions exactly from the video but I cant get the colors to change either for the default calender or for overlay calenders. I can't figure out what's wrong. I was just thinking that color0 might but for default calender? I wanted black text with white background so I used this but nothing happens at all: .ms-acal-color0 { background-color:#ffffff !important; } .ms-acal-color0 a { color:#000000 !important; } .ms-acal-ddiv-color0 a { color:#000000 !important; } .ms-acal-apanel-color0 { background-color:#ffffff !important; } .ms-acal-apanel-color0 a span { color:#000000 !important; } .ms-acal-ddiv-color0 a { color:#000000 !important; } .ms-acal-color1 { background-color:#ffffff !important; } .ms-acal-color1 a { color:#000000 !important; } .ms-acal-ddiv-color1 a { color:#000000 !important; } .ms-acal-apanel-color1 { background-color:#ffffff !important; } .ms-acal-apanel-color1 a span { color:#000000 !important; } .ms-acal-ddiv-color1 a { color:#000000 !important; }
@@Stufman The default calendar item is just ms-acal-item. It will inherit the site theme color if you don't set it manually in your custom CSS file. There isn't a specific class for the title and time for each color, but you can control each one for the entire calendar. For example, if you want the times on the events to be black, you'd use: .ms-acal-sdiv, .ms-acal-mdiv, .ms-acal-ddiv { color: black } If you wanted the event titles to all be black, you'd use: .ms-acal-sdiv a, .ms-acal-mdiv a, .ms-acal-ddiv a { color: black !important } Hopefully that helps.
Hello Celeste, The only way to accomplish this would be to edit the specific view pages and add a content editor or script editor web part with a specific CSS file that overrides the default blue color on that view page.
Hello Brett, You can use JSON formatting to accomplish this in the modern UI. Here's the Microsoft reference guide you can copy/paste into your own calendar: docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/view-calendar-formatting
Is it possible to also change the font color? I tried to use the developer window to find the class the same way as the other colors, but i can't get it to work...I just want to change the font from white to black for all calendar items (and the overlay list on the left hand side)
Hi Nathan, It should be possible by targeting ".ms-acal-sdiv a" (the anchor/link for that element). It doesn't look like that class is specific just to the title based on naming convention but that will allow you to adjust the font color. For the left-nav it's ."ms-acal-apanel-item span" - - I'd be sure to do some testing to see if that changes the font color in any other calendar interfaces.
Thanks for the video. I've followed the clear instructions and I'm seeing no changes. To confirm my troubleshooting steps: SharePoint Server Publishing Infrastructure = Active SharePoint Server Publishing = Active Valid CSS file uploaded and linked to from Master Page > Alternate CSS URL The CSS file loads without any issues if pasting the link into a browser, for example. I've refreshed and cleared the cache to eliminate that as a possible issue. Any suggestions?
Hello Steven, When you say you're seeing no changes, do you mean you aren't seeing your custom colors reflected in your default color-coded view? The first place to start is to ensure the default SharePoint calendar overlay colors are displaying as expected. Then ensure the formatting in your CSS file is correct.
@@JoePreiner Hi Joe. Thanks for the reply. Yes, I'm not seeing the custom colours in the default view, as if no customisation has been implemented. The CSS file is from your example and validates.
Having looked at the source code of the calendar, the link id is referencing the correct CSS file, however, when inspecting an element in developer mode, the original colours are still being referenced.
@@JoePreiner It does, I've copied and pasted your CSS example exactly as it is with the !important property. It sounds like this issue shall remain a mystery as all steps seem to be correct, but thanks for your time in any case, much appreciated.
Thank you this is very helpful. I was able to follow your excellent instructions and the new colors are showing up on the calendar, which is awesome. The only problem is that the Color dropdown still lists the old color namesm so Yellow shows up when you select Olive Green #76956 and turquoise shows up when you select Red #ed0033 etc. I am ok with this but the users get confused easily. Is there a way to change the color names so they correspond to the actual colors in the overlay?
Hey Joe! First of all thank you for the video. But, do you still have the CSS? The link that you shared a while ago doesn't work anymore - website is unreachable... I'd be very grateful if you could share it with me!
Joe, how do you carry that CSS overlay to when you click on the individual calendar and the color stays the CSS color. For Instance, my overlay is great BUT when i click on the calendar is it default blue. I want the Overlay color to stay with the WHOLE individual calendar. Thanks
Hi Phillip, I believe the answer is that it's not possible to have the underlying calendar retain the overlay color. I'll do some poking around and see if I can confirm that.
Hello Joe, Can you help with navigation of this. when I click on "meetings" for example, the color changes to the general calendar color, and the key color for meetings and category description disappears on the left. (as it does in your video). Is there any way to have the category title remain (like a toggle button) and the color of the event stay the color chosen? Thank you for your help.
Hello Sharon, The simple answer is that you can't do much to control the color coding on the underlying calendar pages, or in that left navigation section. You *could* use the same CSS approach and a version of that file into a content editor on each of the individual calendar view pages to control the colors. A bit of busy work to make that happen as you'd have to have a CSS file for each calendar category, and you'd have to manually maintain them if you changed things.
@@rickmellish5815 Have you referenced it in the "Alternate CSS" field under site settings? The site has to know that it's there. If it's just sitting in a document library the site won't care.
Hello Joe, First of all, thank you. Then, I have few errors that make my .css unreadable by SharePoint and I can't figure out why. Here they are : ColorCoded.aspx:1 Refused to apply style from 'MySharePoint' ' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. Do you have any clue? Thanks for all
Hello Julien, I think you just need to re-save your file with a .css extension. Sounds like it might just be HTML or a regular basic text file. Let's start there and you can let me know if that works.
Very helpful info, got it to work. Question though, with Modern sites do you know of a way to get a similar Calendar web part added to a site and alter the color coding in a similar fashion? I know for whatever reason Microsoft hasn't chosen to include it, even though they are transitioning everything away from Classic.
I haven't found a way to do much with the modern UI calendars yet. Modern pages ignore/block any custom CSS settings by design so unless it's already baked into the web part configuration you're mostly stuck with what Microsoft gives you.
Hello everyone - there's a note in the description for this video that links to the CSS for this. Just have to click the "show more" link. Here it is again: www.spsimply.com/home/2018/6/2/sharepoint-customize-the-colors-for-calendar-overlays
Hey Joe, it’s me again. I’ve been watching a lot of your videos as you can see 😂. Can you by chance customize the calendar entries so that it does not show the times on the calendar?
Hi again! Same kind of CSS deal for this. The calendar items have a class for the time element: ms-acal-time. So if you want to hide the time, in your CSS override file just do: .ms-acal-time { display:none !important; } You could obviously also tack this on to the category specific classes if you didn't want to hide the time for every calendar event.
This video needs updating. You skip over how you set up your original CSS colors with your new colors. You mention Notepad ++ but you don't even show what you did with the program. You also don't show how Sharepoint lists out the new colors that you've added. I'm sorry but I don't understand how this video helped others when you glossed over a critical component into how one creates unique colors in Sharepoint calendaring.
Hi Joe. The link to download the file is no longer working. Is there another way I can see what it looks like to create my own?
Your cursor is referencing something that does not appear in the video (beginning around 11:29) am I missing something?
Hi Jean, in the description for this video I call that out and link to the file with the CSS I'm referencing. Here it is again: www.spsimply.com/home/2018/6/2/sharepoint-customize-the-colors-for-calendar-overlays
Hey, I tried to follow the instructions. Oddly enough, when I go to modify the overlay and go to the color dropdown list, it shows my custom colors as mini thumbnails. However, when I select it, the colors remain the same as the old set of colors I was trying to replace on the calendar.
Hi Joe - if you could please provide an updated CSS link, that would be great. The current link is not functional. Thank you!
Joe, thank you for the video and CSS. I tested it in my SharePoint site. I can see the new colors in calendar overlay view, but when I switch to each view calendar, the color goes back to the default color. Are there any way to keep the custom color after switching to the individual view calendar?
Any chance you can provide the CSS file again? I just came across this video but the link for the CSS doesn't work anymore.
Hi Joe. I'm trying to follow your instructions, but I'm not able to access your CSS file. The link you provided is not working. I'm only getting an error that the site can't be reached.
Is there a way to change color of the text in the calendar? Both the title and the description of a calendar post. For example, I would need black text and a bright background mayby lightgray or white.
Yes, you can use that alternate CSS file to target the text for the title and description as well. The classes you need to target involve .ms-acal-sdiv a, .ms-acal-mdiv a, .ms-acal-ddiv a if you want to cover both the time and the title.
@@JoePreiner Thanks for the answer!! One more thing I thought about. Is it necessary to create "overlay calendars" to be able to change colours or can I change the "default calendar"s colours? Because that would be really awesome in my case.
@@Stufman You can change the default color, but that just means instead of being blue, it's going to be whatever new color your choose. If you want multiple colors, the easiest way to achieve that is to use the overlay functionality. By default a SharePoint calendar currently only has one color for events.
@@JoePreiner I have followed your instructions exactly from the video but I cant get the colors to change either for the default calender or for overlay calenders. I can't figure out what's wrong. I was just thinking that color0 might but for default calender? I wanted black text with white background so I used this but nothing happens at all:
.ms-acal-color0
{
background-color:#ffffff !important;
}
.ms-acal-color0 a
{
color:#000000 !important;
}
.ms-acal-ddiv-color0 a
{
color:#000000 !important;
}
.ms-acal-apanel-color0
{
background-color:#ffffff !important;
}
.ms-acal-apanel-color0 a span
{
color:#000000 !important;
}
.ms-acal-ddiv-color0 a
{
color:#000000 !important;
}
.ms-acal-color1
{
background-color:#ffffff !important;
}
.ms-acal-color1 a
{
color:#000000 !important;
}
.ms-acal-ddiv-color1 a
{
color:#000000 !important;
}
.ms-acal-apanel-color1
{
background-color:#ffffff !important;
}
.ms-acal-apanel-color1 a span
{
color:#000000 !important;
}
.ms-acal-ddiv-color1 a
{
color:#000000 !important;
}
@@Stufman The default calendar item is just ms-acal-item. It will inherit the site theme color if you don't set it manually in your custom CSS file.
There isn't a specific class for the title and time for each color, but you can control each one for the entire calendar. For example, if you want the times on the events to be black, you'd use:
.ms-acal-sdiv, .ms-acal-mdiv, .ms-acal-ddiv {
color: black
}
If you wanted the event titles to all be black, you'd use:
.ms-acal-sdiv a, .ms-acal-mdiv a, .ms-acal-ddiv a {
color: black !important
}
Hopefully that helps.
Joe, can you tell me how to get the calendar view to keep the color coding when a view is selected instead of going to the default color?
Hello Celeste, The only way to accomplish this would be to edit the specific view pages and add a content editor or script editor web part with a specific CSS file that overrides the default blue color on that view page.
How do I do this in a modern sharepoint site?
Hello Brett, You can use JSON formatting to accomplish this in the modern UI. Here's the Microsoft reference guide you can copy/paste into your own calendar: docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/view-calendar-formatting
Is it possible to also change the font color? I tried to use the developer window to find the class the same way as the other colors, but i can't get it to work...I just want to change the font from white to black for all calendar items (and the overlay list on the left hand side)
Hi Nathan, It should be possible by targeting ".ms-acal-sdiv a" (the anchor/link for that element). It doesn't look like that class is specific just to the title based on naming convention but that will allow you to adjust the font color. For the left-nav it's ."ms-acal-apanel-item span" - - I'd be sure to do some testing to see if that changes the font color in any other calendar interfaces.
Thanks for the video.
I've followed the clear instructions and I'm seeing no changes.
To confirm my troubleshooting steps:
SharePoint Server Publishing Infrastructure = Active
SharePoint Server Publishing = Active
Valid CSS file uploaded and linked to from Master Page > Alternate CSS URL
The CSS file loads without any issues if pasting the link into a browser, for example.
I've refreshed and cleared the cache to eliminate that as a possible issue.
Any suggestions?
Hello Steven, When you say you're seeing no changes, do you mean you aren't seeing your custom colors reflected in your default color-coded view? The first place to start is to ensure the default SharePoint calendar overlay colors are displaying as expected. Then ensure the formatting in your CSS file is correct.
@@JoePreiner Hi Joe. Thanks for the reply. Yes, I'm not seeing the custom colours in the default view, as if no customisation has been implemented. The CSS file is from your example and validates.
Having looked at the source code of the calendar, the link id is referencing the correct CSS file, however, when inspecting an element in developer mode, the original colours are still being referenced.
@@stevenkf7 I'd make sure your CSS file uses !important for all those custom colors. SharePoint loves to ignore CSS.
@@JoePreiner It does, I've copied and pasted your CSS example exactly as it is with the !important property. It sounds like this issue shall remain a mystery as all steps seem to be correct, but thanks for your time in any case, much appreciated.
Thank you this is very helpful. I was able to follow your excellent instructions and the new colors are showing up on the calendar, which is awesome. The only problem is that the Color dropdown still lists the old color namesm so Yellow shows up when you select Olive Green #76956 and turquoise shows up when you select Red #ed0033 etc. I am ok with this but the users get confused easily. Is there a way to change the color names so they correspond to the actual colors in the overlay?
Hello Mary, If you're talking about the actual overlay setup page then no. There isn't a way to control the CSS on that system page.
@@JoePreiner OK ty for super fast reply. this is still GREAT! So helpful.
Not helpful to me, Mary. Maybe you can create a better video!
Hey Joe! First of all thank you for the video.
But, do you still have the CSS? The link that you shared a while ago doesn't work anymore - website is unreachable...
I'd be very grateful if you could share it with me!
Thank you, Joe. Can you please share the content of the css file and the screen recording is missing that part.
Hi PM,
The CSS is linked to in the description. Thanks!
Joe, how do you carry that CSS overlay to when you click on the individual calendar and the color stays the CSS color. For Instance, my overlay is great BUT when i click on the calendar is it default blue. I want the Overlay color to stay with the WHOLE individual calendar. Thanks
Hi Phillip, I believe the answer is that it's not possible to have the underlying calendar retain the overlay color. I'll do some poking around and see if I can confirm that.
Hello Joe, Can you help with navigation of this. when I click on "meetings" for example, the color changes to the general calendar color, and the key color for meetings and category description disappears on the left. (as it does in your video). Is there any way to have the category title remain (like a toggle button) and the color of the event stay the color chosen? Thank you for your help.
Hello Sharon, The simple answer is that you can't do much to control the color coding on the underlying calendar pages, or in that left navigation section. You *could* use the same CSS approach and a version of that file into a content editor on each of the individual calendar view pages to control the colors. A bit of busy work to make that happen as you'd have to have a CSS file for each calendar category, and you'd have to manually maintain them if you changed things.
@@JoePreiner Thank you!
instead of disabling the master page setting, couldn't you just paste the CSS into a script editor webpart on that calendar?
Hi..was there an answer to your question? Would that then only affect the specific calendar and not other calendars on the site?
Hey there, I need help. the CSS file that I loaded didn't work
Hi Rick. Couple questions. Where are you loading the CSS file? Classic UI Site? What's the result? Just nothing changes?
@@JoePreiner Hi Joe, I loaded the CSS file to a document library for SharePoint Online. When I go back to my Calendar, nothing changes.
@@rickmellish5815 Have you referenced it in the "Alternate CSS" field under site settings? The site has to know that it's there. If it's just sitting in a document library the site won't care.
@@JoePreiner can you elaborate on that? "Have you referenced it in the "Alternate CSS" field under site settings?"
@@rickmellish5815 I walk through it at the 9:54 mark. Site settings > Masterpage > Alternate CSS URL > paste your file location in there > click OK
Hello Joe,
First of all, thank you.
Then, I have few errors that make my .css unreadable by SharePoint and I can't figure out why.
Here they are : ColorCoded.aspx:1 Refused to apply style from 'MySharePoint' ' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Do you have any clue?
Thanks for all
Hello Julien,
I think you just need to re-save your file with a .css extension. Sounds like it might just be HTML or a regular basic text file. Let's start there and you can let me know if that works.
@@JoePreiner hi again! I made a mistake : I copied the link and I had to use "browse" button. Thanks
Very helpful info, got it to work. Question though, with Modern sites do you know of a way to get a similar Calendar web part added to a site and alter the color coding in a similar fashion? I know for whatever reason Microsoft hasn't chosen to include it, even though they are transitioning everything away from Classic.
I haven't found a way to do much with the modern UI calendars yet. Modern pages ignore/block any custom CSS settings by design so unless it's already baked into the web part configuration you're mostly stuck with what Microsoft gives you.
Your selecting stuff but it's not on Screen..
I think you're missing some screens. :(
agree, the notepad++ screens didnt come through. Thank you though :)
Joe can you please repost your CSS file, I can seem to see it here - Thanks
Hello everyone - there's a note in the description for this video that links to the CSS for this. Just have to click the "show more" link.
Here it is again: www.spsimply.com/home/2018/6/2/sharepoint-customize-the-colors-for-calendar-overlays
Frustrating that the css file was not shared.
www.spsimply.com/home/2018/6/2/sharepoint-customize-the-colors-for-calendar-overlays
There you go. I don't attach files to video.
Hey Joe, it’s me again. I’ve been watching a lot of your videos as you can see 😂.
Can you by chance customize the calendar entries so that it does not show the times on the calendar?
Hi again!
Same kind of CSS deal for this. The calendar items have a class for the time element: ms-acal-time.
So if you want to hide the time, in your CSS override file just do:
.ms-acal-time {
display:none !important;
}
You could obviously also tack this on to the category specific classes if you didn't want to hide the time for every calendar event.
Hey! Make more videos. Yours are so great! Wasted talent if not used! LOL
This video needs updating. You skip over how you set up your original CSS colors with your new colors. You mention Notepad ++ but you don't even show what you did with the program. You also don't show how Sharepoint lists out the new colors that you've added. I'm sorry but I don't understand how this video helped others when you glossed over a critical component into how one creates unique colors in Sharepoint calendaring.