Proposal - Attach cross-cms "page identifier" class to <body>
Currently there is no consistent way in Civi to tell which page you are on by querying the DOM. Usually this is done by having a class attached to the
<body> tag that identifies the current page. Unfortunately each CMS use different naming conventions, or attaches no class at all.
For example: this is the Contact Summary page's
<body> tag on each CMS
<!-- Drupal: .page-civicrm-contact-view --> <body class="html not-front ... page-civicrm page-civicrm-contact page-civicrm-contact-view"> <!-- Joomla: .task-civicrmcontactview --> <body class="admin com_civicrm ... task-civicrmcontactview"> <!-- Wordpress: none :( --> <body class="wp-admin wp-core-ui ... customize-support svg”>
Civi should attach "proprietary" classes to
<body>, independent from the underlying cms, so we would have something like
<!-- Drupal --> <body class="html not-front ... page-civicrm page-civicrm-contact page-civicrm-contact-view civi-page-contact-view"> <!-- Joomla --> <body class="admin com_civicrm ... task-civicrmcontactview civi-page-contact-view"> <!-- Wordpress --> <body class="wp-admin wp-core-ui ... customize-support svg civi-page-contact-view”>
It would open new cross-cms customization avenues for devs: styles applied only a specific page, JS plugins that use the body class to bootstrap itself or perform an action only on certain pages, etc.
Of course currently one can already inject a css/js file on specific pages by using
hook_civicrm_pageRun(), but this approach lacks the flexibility that the proposed solution would instead provide.
I figured that there would be at least two:
- Find a way in all 3 cms to alter the list of classes attached to
<body>that doesn't involve using a theme hook, given that this solution should be both cms and theme agnostic (you don't want those classes to disappear the moment an admin decides to change the administration theme)
- Figure out how to programmatically generate the class name for each individual civi page
Before opening the issue I asked in the dev channel if there was already a way to identify a page that I wasn't aware of (https://chat.civicrm.org/civicrm/pl/of6xsr17sidujmm1tuasr8bupy), but apparently there isn't, at least not the in the way I'm proposing here