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 Workforce and Community Emblem Site Menu Open Site Menu Close
Skip to Content
Modern Campus Support
Site Search
Search

Styles

When you get started with layouts, Modern Campus CMS creates the default CSS file that your layouts will use to create pages. Generating CSS adds a disabled /omni-cms folder to your site in Content > Pages. This folder will publish to your production server and will be logged as an action taken by "System."

To edit the default CSS,

  1. Go to Content > Layout Builder > Styles.
  2. Click the lightbulb icon to check out the file for edits.
  3. Save and Publish to apply the styles to your live site and update existing tiles, frames, layouts, and pages created from layouts.

Background, Typography, Colors, Containers, Responsive DesignLink to this section

Configure the built-in Tailwind CSS as follows:

General

Enter a hex code for the background and text colors.

Enter any web safe font for body and heading text.

Enter a screen size to fit the width of the visitors' device.

Typography

Use Tailwind utilities to control font size and weight, letter spacing, and line height.

Colors

Use hex codes to change the default color palette of your site. To add a color and generate shades of that color, click +New Color and enter a hex code.

Containers

Use Tailwind utilities to control borders and box shadows.

You can also use any of the Tailwind CSS directly inside tiles and frames.

Preview

See a preview of the built-in Tailwind CSS. In the Edit CSS panel, click Preview Styles to see how your styles will look when you publish a page created from a layout.

  • In the Preview Type dropdown, select any layout, tile, or frame to preview.
  • Resize the preview window to preview the responsive sizing of your layout, tile, or frame.

AdvancedLink to this section

To optimize the performance of your page, Modern Campus CMS removes unused CSS when you publish a page created from a layout (also known as a Layout Control File [LCF]). You can "safelist" classes to prevent them from being purged from the production CSS file. This is useful if you use JavaScript that injects classes that are not used inside a tile or frame.

  1. In Content > Layout Builder, go to Styles > Advanced.
  2. Click the lightbulb icon to check out the file for edits.
  3. List the classes you want to keep in the production CSS file.
    • Separate classes with a comma or line break.
  4. Save and Publish.

Custom CSSLink to this section

In addition to the built-in Tailwind CSS, you can use your own custom CSS and reuse existing Tailwind styles.

To apply custom CSS to individual pages, use the head code for a layout or for a page.

  1. In Content > Layout Builder, go to Styles > Custom CSS.
  2. Click the lightbulb icon to check out the file for edits.
  3. Save and Publish to apply the styles to your live site and update existing tiles, frames, layouts, and pages created from layouts.

Reuse Tailwind Styles

You can use the Tailwind @apply to simplify reusability.

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