Theming CiviCRM is difficult not only because it needs to integrate with four CMS (six including Drupal 7 and Joomla 3, seven including Standalone), and 1000s of extensions, but over 19 years of development, it has adopted many ways of doing the same thing in the markup and front-end frameworks.
This makes theming both a challenge and brittle, which should change with the modernisation of many page templates, with FormBuilder and SearchKit.
Rich (@artfulrobot) and Nic (@nicol) – who each publish a CiviCRM theme (Aah & Finsbury Park) – in discussion with the CiviCRM Core Team, have developed a proposal to improve Civi’s UI for the long term. In tribute to LeXiM and other Civi acronyms, it can be shorted to DINO:
- Document variations of Civi’s Markup patterns in an extension.
Status - over 70% complete: https://lab.civicrm.org/extensions/themetest/ - Identify preferred markup structure for each UI element to create a component library, centered around Search Kit and Form Builder.
Status - completed for one category: Accordions/Collapsible regions. See: #60. - New theme for CiviCRM/Notify existing-themes written around the best practice UI versions, with fallbacks for the old markup patterns. Wide use of CSS Variables to support easy retheming/adjustment. Status - complete, a New Theme Framework 'RiverLea' will ship with CiviCRM 5.80, and include versions of Shoreditch/Island, Greenwich, Aah and Finsbury Park.
To notify existing themes of breaking changes a new Theme Maintainers channel has been created on Mattermost. - Old markup removal based on the identified 'canonical' best practice in step 2.
Status - started for accordions with CiviCRM 5.69. See: #60 on Gitlab, and on Github: 28415, 28421, 28430, 28441, 28449, 28473
This is a long-term project that will depend on the support (in-kind and financial) of the community to help implement a modern CiviCRM UI that builds on the ambition of Shoreditch (make CiviCRM look and feel better) with cross-CMS support, and a path to improve dated markup rather than hide it.
Goals for retheming CiviCRM
- Ease. Make it easier for anyone to retheme Civi quickly across all CMSs, front and backend, such as by using CSS Variables to make it quick to both reskin Civi and match the UI to your intranet/brand.
- Markup. Improve Civi’s HTML markup to make it consistent, reliable, mobile-responsive and accessible (ie WCAG compliant).
- Design. Make an accessible & responsive Civi that looks better out the box across all CMS, and integrate with different kinds of front-end theme better.
- Patterns Revise the Style Guide to make it easier for extension developers to build interfaces that both use Civi-wide User Experience (UX) patterns, and accessible and responsive markup that can is structured corectly to cleanly inherit theme styling.
- Parallel. Don’t wait until every part of Civi has been re-implemented in SearchKit and FormBuilder to do this, but, like SK and FB, allow a new theme to handle both old ‘bad’ markup and new 'canonical' markup, as we slowly transition Civi to better markup.
This strategy was developed with Rich Lott (Artful Robot) and presented at CiviCamp Hamburg in summer 2024.
