Themes

Themes control how Rock looks, from the internal pages your staff use every day to the kiosk screens families see at check-in. Rock ships with two generations of themes, and the Theme Styler gives you a friendly way to customize both without touching a line of code. Let's look at what each kind offers and how to make a theme your own.

Two Kinds of Themes

Legacy themes - Built from Less files, a styling language that browsers can't read directly. Rock compiles those files into CSS whenever you save a change. Most of the themes that shipped with Rock over the years work this way, including the classic check-in themes such as Aero, Electric and Park.

Next-gen themes - Built from finished CSS plus a small settings file that lists the options you can change. When you save, Rock simply writes your choices in as CSS variables, so there's nothing to compile and your changes apply the next time a page loads. RockNextGen (the internal Rock theme) and NextGenCheckin (the Next-Gen Check-in kiosk theme) are next-gen themes.

You don't need to memorize which is which. The Purpose column in the theme list tells you, and the Theme Styler adjusts itself to the theme you open.

Less, Sass and Your Own Themes

Legacy themes are written in Less. When you save in the Theme Styler, Rock compiles the theme right away. If you edit a legacy theme's Less files directly on the server, select Compile in the theme list so Rock rebuilds its CSS.

Whatever you build a website theme from, have it pull in Rock's core styles instead of copying them into its own files. That keeps editors, icons and blocks styled as Rock updates, and it's why some older themes look off after an update. The simplest start is a copy of Stark, Rock's basic website theme, which is already set up this way.

The next-gen themes that ship with Rock (RockNextGen, RockManagerNextGen and NextGenCheckin) are written in Sass and arrive as finished CSS. They're built for the internal site and check-in kiosks, so start a public website from Stark instead. Rock doesn't compile Sass, so a custom theme written in Sass needs to be compiled to CSS before you add it to your theme's folder. Add a theme.json settings file too, so Rock recognizes it as a next-gen theme and shows its options in the Theme Styler.

When you add your own styles, use Rock's color variables, such as var(--color-primary), instead of typing in colors. Your styles then follow the theme's colors and carry over if you move to a next-gen theme later.

Theme List

You can view a list of installed themes under Admin Tools > CMS Configuration > Themes.

Theme Name - The name of the theme, which also matches its folder on the server.

Purpose - Shows how the theme is used: Website NextGen for a next-gen website theme, Website Legacy for an older Less-based website theme, or Check-in for kiosk themes.

Allows Compile - Applies to legacy themes only. A theme designer can keep a theme from being compiled by Rock. A theme set up this way won't pick up Rock's style updates. If an older theme looks off after an update, check this column and talk with the theme's designer.

System - Marks a theme that came with Rock. System themes can't be deleted, so copy one if you want to make changes you can throw away later.

Compile - Rebuilds a legacy theme's CSS by hand. You'll only see this button on legacy themes, since next-gen themes never need compiling.

Copy - Duplicates the theme under a new name of your choosing. Style the copy however you like without affecting the original.

Delete - Removes a theme you created. System themes don't offer this option.

Theme Styler

Selecting a theme from the list opens the Theme Styler. Here's the Theme Styler for the NextGenCheckin theme. The fields you see depend on the theme, since each theme designer decides which options to expose.

Theme Variables - The options the theme designer provided for you to change. Some let you pick colors, others swap images, adjust fonts or set sizes. Next-gen themes group the advanced options in a collapsed panel so the everyday choices stay front and center.

Variable Refresh - After changing a variable, a small x lets you return it to its original value. Be creative. You can always go back to the default if you don't like your selection.

Icon Sets - Next-gen themes let you choose which icon libraries to include, Tabler Icons, Font Awesome or both, depending on what the theme supports. When Font Awesome is enabled you can also pick its default weight.

CSS Overrides - When there's no variable for the change you want, enter your own CSS here. Rock adds it after the theme's own styles so it gets the last say on how an element looks.

Save - Saves your changes. A legacy theme recompiles its CSS at this point, while a next-gen theme applies your choices the next time a page loads. If you're editing the internal Rock theme you'll notice the difference right away.