Custom CSS for Modern Campus CMS Calendar

Customize the styles on the public events page of your Modern Campus CMS calendar using CSS.

To create custom CSS for this page,

1. Create a copy of our starter stylesheet (CSS) in Modern Campus CMS.
   • For example, /_resources/css/calendar.css
2. Style the HTML elements of the calendar using the id attribute(s).
   • For example, #hero-title { color: lightblue; }
3. Save and Publish.

Then, link the calendar to the stylesheet using a source code asset.

1. Copy the embed code for the calendar.
2. Go to Content > Assets.
3. Click +New.
4. Click Source Code.
5. Name your asset.
6. In the mini-source code editor, paste the calendar embed code.
   • For example, 
     

     <omnicms-calendar data-calendar-id="6a774d2c-9735-40b7-9459-cb7d95fce228"></omnicms-calendar>
     <script>
                    (function(src) {
                                   if (document.querySelector(`script[src="${src}"]`) !== null) return;
                                   const s = document.createElement('script');
                        s.async = true;
                        s.src = src;
                        s.id = 'omnicms-calendar';
                    document.getElementsByTagName("head")[0].appendChild(s);
         })('https://jharris.oucampusdemo.com/_resources/calendar_public_view_qa/app.js');
     </script>
     

7. Add data-css="/_resources/css/calendar.css", or similar file path, to the opening omnicms-calendar tag.
   • For example,
     

     <omnicms-calendar data-calendar-id="6a774d2c-9735-40b7-9459-cb7d95fce228" data-css="/_resources/css/calendar.css"></omnicms-calendar>
     <script>
                    (function(src) {
                                   if (document.querySelector(`script[src="${src}"]`) !== null) return;
                                   const s = document.createElement('script');
                        s.async = true;
                        s.src = src;
                        s.id = 'omnicms-calendar';
                    document.getElementsByTagName("head")[0].appendChild(s);
         })('https://jharris.oucampusdemo.com/_resources/calendar_public_view_qa/app.js');
     </script>
     

8. Click Create.
9. Publish the asset.