I am developing a CiviCRM database for a client in WordPress. This database will supplement and hopefully one day replace a paper-based system spread around several thousand file folders.
The client uses a colour-coding system in these file folders to note the service users’ medical condition. Over time the colour coding has become subconscious to them in the sense that if the files are in an orange folder, they know what condition they are dealing with. The client was keen to carry this colour coding over into the CRM. The trick was getting the CRM to use the correct colour code depending on what condition has been selected.
Here’s how I did it.
The conditions are CiviCRM custom fields.
So first I needed to colour code the initial form that the client uses to input the service users’ information. I added the CSS coding for each condition, its corresponding labels, and its general display:
label[for=custom_16_-1_Asbestosis],
label[for=custom_16_2_Asbestosis],
label[for=custom_16_3_Asbestosis],
label[for=custom_16_4_Asbestosis],
.asbestosis {
color: #fff !important;
background-color: #2F2FFF !important;
padding: 3px; }
That gives us this within the input form (shown here with dummy data).
That’s all good, but how do you carry that colour coding over into the main dashboard where CiviCRM displays its information?
For that you need a bit of jquery.
I wrote a quick script covering all the possible selectors for the health conditions:
jQuery(document).ready(function(){
jQuery('.crm-content:contains("mesothelioma")').addClass('mesothelioma');
jQuery('.crm-custom-data:contains("Mesothelioma")').addClass('mesothelioma');
jQuery('.crm-content:contains("lung cancer")').addClass('lungcancer');
jQuery('.crm-custom-data:contains("Lung Cancer")').addClass('lungcancer');
jQuery('.crm-content:contains("asbestosis")').addClass('asbestosis');
jQuery('.crm-custom-data:contains("Asbestosis")').addClass('asbestosis');
jQuery('.crm-content:contains("pleural thickening")').addClass('pleuralthickening');
jQuery('.crm-custom-data:contains("Pleural Thickening")').addClass('pleuralthickening');
jQuery('.crm-content:contains("pleural plaques")').addClass('pleuralplaques');
jQuery('.crm-custom-data:contains("Pleural Plaques")').addClass('pleuralplaques'); });
I enqueued that script correctly in the WP admin.
And voila. Any time the condition is displayed in the main dashboard, it is colour coded.
