Themes

As we’ve already seen, the Theme Styler provides an easy way to compile our themes. That's just scratching the surface of what's possible. Let's now go a bit deeper into all of the power of Rock's theme tools.

Theme List

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

  1. Theme Name - Pretty obvious…the name of the theme.
  2. Purpose - Indicates how the theme is used in Rock, such as for Check-in or legacy website layouts.
  3. Allows Compile - A theme designer can keep a theme from being compiled by Rock. This is rare and is usually only done for internal themes developed for a specific organization.
  4. System - This notes that this theme is a system theme that came with Rock. These themes cannot be deleted.
  5. Compile - This button allows you to manually compile a theme.
  6. Copy - This button allows you to copy the theme to a new theme with a name of your liking. This allows you to change it without worrying about affecting others.
  7. Delete - This button allows you to delete the theme.

Theme Styler

Selecting a theme from the list will take you to the Theme Styler. Below is the theme styler for the Check-in Adventure Kids theme.

  1. Theme Variables - You'll notice that the theme designer has provided several variables for you to modify. These variables allow several different customizations. Some you'll notice allow you to choose colors. Others modify fonts, images and units of measure.
  2. Variable Refresh - After changing a variable you'll notice a small x allows you to return the value back to its original state. Be creative… you can always go back to the default if you don't like your selection.
  3. CSS Overrides - You may find that there is no variable for the change you want to make. Never fear, you can enter any overriding CSS in this box. It will be placed at the bottom of the compiled CSS to ensure that it gets the last say on how an element should be styled.
  4. Save - Pressing the save button will not only save your changes, but also compile the Less file to CSS. If you're editing the internal Rock theme, you'll notice your changes right away!

Note

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.