CiviCRM themes

CiviCRM includes base styles that give its user interface a standard look and feel. Your chosen CMS theme can also affect that appearance. Since v5.16, CiviCRM has supported installing a CiviCRM theme to load custom CSS, images, or other assets.

The theming system extends the existing ability to override or hide the default civicrm.css file. It provides separate options to disable the stock CiviCRM CSS on the front-end or back-end, giving system administrators more control over the appearance of CiviCRM for their users.

CMS theming system interactions

CMS integrations have their own theming systems, which may interact or clash with a CiviCRM theme. When creating either kind of theme, consider how the chosen themes might interact. You can also use no CiviCRM theme and handle all style customization through the CMS theme.

CMS integration

The CiviCRM theming subsystem lets you decide which CiviCRM theme to use. The available options depend on your CMS:

• For Drupal and Backdrop, you can choose a theme for front-end CiviCRM pages, such as Contribution Pages, and a theme for back-end pages, such as Advanced Search and Contact Summary.
• For WordPress and Joomla, you can choose a theme based on whether a page is a front-end or back-end page.

How CiviCRM identifies front-end and back-end pages

For Drupal and Backdrop, the test is the presence of the is_public key on the menu route for the requested URL. For WordPress and Joomla, the test is whether the is_frontend configuration parameter is true.

Installing a CiviCRM theme

To install a CiviCRM theme, download an extension that implements hook_civicrm_themes. The Shoreditch extension is one example.

After downloading and enabling the extension, go to Administer -> Customize Data and Screens -> Display Preferences and set the theme you want to use.