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.
- Open your public events page and find the element you want to style.
- Use the browser's Inspect Element tool.
- In most cases, you’ll right-click and select Inspect or Inspect Element.
- Find the
id
attribute for the element.- For example,
<h1 id="hero-title">Gallena Calendar</h1>
- For example,
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.
- Go to
_resources/css/
. - Click +New to create a CSS file.
- For example,
calendar.css
.
- For example,
- Use the
id
attribute(s) to enter your custom CSS.- For example,
#hero-title { color: lightblue; }
- For example,
- 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.
- Go to Content > Assets.
- Click +New.
- Click Source Code.
- Name your asset.
- 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>
- For example,
- Add
data-css="/_resources/css/calendar.css"
to the openingomnicms-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>
- For example,
- Click Create.
- Publish the asset.