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

 
Skip to Content

Styles

When you get started with layouts, Omni 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.

To edit the default CSS,

  1. Go to Content > Melody > 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

AdvancedLink to this section

To optimize the performance of your page, Omni CMS removes unused CSS when you publish a page created from a layout. 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 > Melody, 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 > Melody, 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.