Custom CSS for Omni CMS Calendar

Use CSS to customize the styles on the public events page of your Omni CMS calendar. 

First, determine which HTML elements on the calendar page you want to style. Then create a stylesheet (CSS) file. Finally, link to the stylesheet in the calendar embed code.

Calendar HTML ElementsLink to this section

The calendar uses default CSS, along with your selections in calendar settings, to control the design of your public events page. To create custom CSS for this page, find the id attribute(s) you will use to point to a specific style declaration in a stylesheet.

1. Open your public events page and find the element you want to style.
2. Use the browser's Inspect Element tool.
   • In most cases, you’ll right-click and select Inspect or Inspect Element.
3. Find the id attribute for the element. 
   • For example, <h1 id="hero-title">Gallena Calendar</h1>

CSS FileLink to this section

Create a new CSS file in Omni CMS that will define how the HTML elements on your calendar public events page should be displayed.

1. Go to _resources/css/.
2. Click +New to create a CSS file.
   • For example, calendar.css.
3. Use the id attribute(s) to enter your custom CSS.
   • For example, #hero-title { color: lightblue; }
4. Save and Publish.

Calendar Embed CodeLink to this section

Use a source code asset to link the calendar to your stylesheet. This will allow you to override one or more of the calendar's default CSS properties with properties defined in the custom CSS you created.

First, copy the embed code for the calendar.

Then place it in a source code asset and add a data-css attribute to the opening omnicms-calendar tag.

1. Go to Content > Assets.
2. Click +New.
3. Click Source Code.
4. Name your asset.
5. 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>
     

6. Add data-css="/_resources/css/calendar.css" 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>
     

7. Click Create.
8. Publish the asset.