Modern Campus Catalog Emblem Modern Campus CMS Emblem Modern Campus Curriculum Emblem Modern Campus Involve Emblem Modern Campus Lifelong Learning Extended Education Emblem Modern Campus Message Emblem Modern Campus Navigate Emblem Modern Campus Schedule Emblem Modern Campus Virtual Tours & Maps Emblem Modern Campus Lifelong Learning Workfore and Community Emblem

Custom CSS for Omni CMS Calendar

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

To create custom CSS for this page,

  1. Create a copy of our starter stylesheet (CSS) in Omni 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.

By continuing to use this site, you agree to the storing of first- and third-party cookies on your device to enhance site navigation; analyze site, product, and service usage; and assist in our marketing and promotional efforts. Cookie Policy