I have built a table in SearchKit and I want to colour the rows based on a person display name. Whilst the available styles are useful I would like to expand these to have more colours available I have searched on Google and looked through Civi docs but could not find much information. Any ideas would be much appreciated. See the image below for further detail:

enter image description here

1 Answer 1


You can add your own class with the Other option and then load some css targeting that class, either via a custom css file (under Admin > System Settings > Resource URLs), from your CMS or in an extension. The custom css file option is the easiest, though it will load on all pages.

  • Thanks this is great, ideally I would prefer not to use the Resource URLs as I don't want it to appear anywhere else but the table. We are running on top of Drupal, are there any existing extensions that supply the required functionality ? Appreciate the help. Commented Jul 12, 2023 at 20:13
  • I've used CSS Injector for this on D7 (Asset Injector on D8).
    – Lars SG
    Commented Jul 12, 2023 at 22:07
  • Yeah I did try that is there any way to prevent the CSS applying across the whole website? I only want to color the rows if they match the set display name? Appreciate all your help thus far. Commented Jul 13, 2023 at 9:13
  • You should be able to set the path for the rule in CSS Injector. Unless that doesn't work with angular pages?
    – Lars SG
    Commented Jul 13, 2023 at 13:56
  • It should work if embedded on an afform. Afform routes are "real" pages :)
    – Coleman
    Commented Jul 17, 2023 at 14:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.