Core Docs - Digital Publishing - Themes

Rock Version: v21.0
Last Modified: 2026-09-18 4:01 PM

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.

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 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. This is rare and is usually done for internal themes built for one organization.

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. Below is 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.

Not a Glass Person?
The internal Rock site gives its navigation a translucent glass look by default. To switch it off, open the RockNextGen theme from the theme list, turn off the Glass Nav toggle under Base Theme and select Save. Reload your browser to see the change.

Not All Themes Support Variables
It is up to the theme developer to add support for modifying variables. You may encounter some themes that do not support changing the styling.

Styling Your Check-in Kiosks?
The NextGenCheckin theme has its own walkthrough. See Customize Your Check-in Theme in the Check-in guide.