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 (https://civicrm.org/blog/kylejaster/civicrm-31-templates-theming-css-bonanza) - 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: https://civicrm.org/blog/teja/civicrm-bootstrap-thoughts-on-interface-design & https://civicrm.org/blog/teja/bootstrap-civicrm-what-do-you-think.

Forum thread: https://forum.civicrm.org/index.php%3Ftopic=31534.0.html

Some docs: https://docs.civicrm.org/sysadmin/en/latest/integration/drupal/bootstrap-css/

2016: Shoreditch

Bootstrap based and developed by Compucorp in response to slow rollout of the CiviCRM/Bootstrap project, built for Drupal 7. https://github.com/compucorp/org.civicrm.shoreditch

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. https://lab.civicrm.org/extensions/haystacktheme

Cross-CMS: Finsbury Park


Drupal-only: Shoreditch (see above)*


Shoreditch for WordPress

Using the link above and this extension https://civicrm.org/extensions/shoreditch-wordpress-workarounds

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. https://wordpress.org/plugins/civicrm-admin-utilities/

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) https://github.com/vingle/civicrm-shelford

Old/deprecated solutions https://github.com/andy-walker/com.uk.andyw.styler

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