Published
Monday, November 19, 2018 - 12:39
Written by

In the past few weeks we have been looking at how a more uniform user experience could be provided between CiviCRM and WordPress dashboards. We looked at potentially leveraging Shoreditch, but quickly realized that it's dependent on a Drupal theme and the readme clearly stated that is was only for Drupal. So we stepped back and looked at how we could do this with CSS changes that apply to the admin only, since this is not affected by the theme at all.

This development was done with Christian Wach through the CiviCRM Admin Utilities plugin. Once you install the plugin, go to the settings screen to apply WP Admin Styles across the CiviCRM dashboard. There are two sections:

  • On the top CiviCRM Admin Appearance, has two options to apply WP admin styles to the CiviCRM Admin Menu and the dashboard itself. Leave these deselected to retain the default CiviCRM css.
  • The second section under CiviCRM Style Sheets provides options to enable or disable CSS, including the default CiviCRM as well as any custom CSS file you may use and define if it's applicable to only the admin or the public pages, meaning only affecting contribution and event pages, as well as profiles available to the public on your website.

CAU Settings

If both options are selected in the first section, the CiviCRM Admin screens look a lot more like the WordPress admin screens.

CiviCRM Welcome Dashboard

CiviCRM Advanced Search

CVWP Styles Contact Record

When viewing a group of contacts, the table heading sticks at the top so as you scroll down.

CVWP WP Styles Sticky Table Headers

It even uses the WP color you may have selected for your admin screens!

User Profile Ectoplasm

Filed under

Comments

This is so incredibly great--thank you!!

Christian is a huge asset to the WP/CiviCRM community.

Yes we love this plugin!  Can this code be merged into civicrm for wordpress core?