Skip to content

User Interface

This is an attempt to aggregate key resources, docs, links, files, etc related to the CiviCRM User Interface (UI) and User Experience (UX) - so please edit this page in the wiki if you can add to it or correct something.

Key resources

Theming guide

UI reference guide

Includes correct markup for accordions, buttons, icons, date picker. Also a guide to usage of post 4.7 FontAwesome icons.

Templating reference guide

Overriding core template features

Current strategy..

The roadmap is for CiviCRM to integrate with Bootstrap.

A brief history..

2004.. CiviCRM launches

2009: Templating changes (3.1)

Following the NYC dev sprint was an increased focus on improving markup, moving from tables to divs with more care over CSS specificity (details).

This led to a few docs outlining a bunch of problems:

This had some progress with an update in 2010 ( - and which inspired development of the theming engine still in existence today.

2014: CiviCRM & Bootstrap

This began as a GSoC project in 2014. It is listed as goal 2 on the CiviCRM Roadmap.

Some related blogs: &

Forum thread:

Some docs:

2016: Shoreditch

Bootstrap based and developed by Compucorp in response to slow rollout of the CiviCRM/Bootstrap project, built for Drupal 7.

At time of writing, Shoreditch is the only theme which implements a consistent look-and-feel in both vocabularies. It is intended to be a bridge that provides a consistent look-and-feel while other parts of the application transition from crm-* to BootstrapCSS.

Blogs: March 2018

Shoreditch design guide:

Current admin themes:

Cross-CMS: Haystack

Matthew Wire turned CAU into an early extension that can run across all CMSs, with CMS-specific overrides and some user-config. It uses responsive tables to considerably improve the mobile and tablet behaviour of Civi admin pages.

Cross-CMS: Finsbury Park

Drupal-only: Shoreditch (see above)*

Shoreditch for WordPress

Using the link above and this extension

Drupal-only: Aah

WordPress-only: CiviCRM Admin Utilities (CAU)

With funding from Tadpole, CUNY and Greenleaf, Christian Wach created a set of WordPress CiviCRM admin utilities that, amongst other things, made CiviCRM's look and feel much closer to that of WordPress admin.

Single file / cross-CMS: Shelford

A single css file running on top of civicrm.css, loaded through the admin paths page. The advantage of a single file is you can create a multi-cms test environment and load the same file in each so can test changes across all CMSs)

Old/deprecated solutions

What's in a name? CiviCRM themes traditional follow the name of where they were created