Theme Roller

Theme Roller lets you make your own themes. Start from any built-in theme, change its colours, fonts, spacing and borders with a live preview, and save it. Open it from Theme Roller in the admin sidebar (Theme Roller).

What it does

• A custom theme is a built-in theme (its base) plus the settings you changed. Everything you did not change still comes from the base.
• Saved themes are listed under Custom themes wherever a theme is chosen in Content > Theme: the site theme, the admin theme, the day and night themes, and element overrides (one region of a page).
• You can also use a theme on the site or in the admin straight from Theme Roller.
• The Custom CSS tab edits the site's own CSS, added to every public page after the theme.

Custom themes need Domma CMS 0.73 or later. On an older version a warning says so; themes still save but cannot be used.

Getting started

1. Open Theme Roller. The roller opens on the theme your site shows now.
2. In the roller, pick a base theme.
3. Change the colours, fonts, spacing or borders you want. The whole admin changes as you go, so you can see the result.
4. Press Save and give the theme a name (for example "Brand").
5. Open the Saved themes tab, right-click your theme and choose Use on the site.

Screens

The banner has New theme and Save buttons. Save saves the theme on the Roller tab, or the CSS when you are on the Custom CSS tab.

Roller

The theme editor. The bar above it shows the name of the theme you are editing (or New theme), an Unsaved tag when you have changes, and where the theme is in use (Site, Admin, Day, Night or Region).

• Pick the base theme and change any setting in the roller. The preview covers the whole admin while you are on this screen. When you leave, the admin goes back to its own theme.
• New - start a new theme.
• Save - save the theme. A new theme asks for a name first. Saving a theme that is in use updates the site straight away.
• Save as... - save your settings as a new theme, leaving the original as it was. Shown when you are editing a saved theme.
• The menu button next to it has the same actions as a theme in Saved themes.

If you leave with unsaved changes you are asked first. Unsaved work (in the roller or in Custom CSS) is offered back the next time you open Theme Roller.

Saved themes

Every theme you have saved, with where each is used.

• Click a theme (or press Enter on it) to edit it in the roller.
• Right-click a theme (or use its menu button, or Shift+F10) for:
  • Edit in the roller
  • Use on the site / Stop using on the site
  • Use in the admin / Stop using in the admin
  • Duplicate... - a copy under a new name.
  • Rename...
  • Export CSS - downloads the theme as a .css file. It holds only your changes, as a block for dm-custom-<id> to use together with the base theme's class.
  • Delete... - if the theme is in use, each place it was used goes back to its base theme.

Good to know:

• Use on the site when day/night switching is on asks first, then switches day/night switching off. The site then shows this one theme.
• Stop using puts that place back on the theme's base.
• Use... uses the saved version. Save first to include changes still in the roller.
• The admin shows the new admin theme once you leave the Theme Roller screen.

Custom CSS

Hand-written CSS added to every public page, after the theme, so it has the last word. This is the same CSS as System > Site Settings > Custom CSS.

1. Wait for the CSS to load; the box stays locked until it has.
2. Edit it.
3. Press Save CSS or Ctrl+S.

Using a custom theme elsewhere

Open Content > Theme. Your saved themes are listed under Custom themes in each theme picker:

• Site theme and Admin theme.
• Day theme and Night theme, under Switch between a day and a night theme.
• Element overrides, to theme one region of a page.

Settings

Theme Roller has no settings of its own.

Permissions and roles

Theme Roller uses the built-in Theme permission (group Configuration) in System > Roles; it adds none of its own.

Action	Label	Allows
theme.read	View	Open Theme Roller and see the saved themes
theme.update	Edit	Save, duplicate, rename and delete themes; use them on the site or in the admin

The Custom CSS tab needs Settings > Edit (settings.update). Without it the tab cannot load or save.

Tips

• Only what you change is stored. If the base theme is improved in a later version of Domma CMS, your theme picks that up.
• Duplicate a theme before trying a big change, so you can go back.
• Changing a theme's base theme while it is in use updates the site straight away.
• The Theme Roller sidebar badge shows how many custom themes you have and how many are in use. Its popover shows the site theme (or the day and night themes) and the admin theme.

Limitations

• The public theme switcher (Content > Theme > Theme switcher) offers built-in themes only. Visitors cannot switch to a custom theme; they can only pick between the built-in ones.
• For safety, some values are refused: no url(), @import, comments, braces, semicolons, <, > or backslashes. A setting with such a value is dropped when the theme is saved.
• Custom themes need Domma CMS 0.73 or later.