Answers.Body: <p>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 &gt; System Settings &gt; Resource URLs), from your CMS or in an extension. The custom css file option is the easiest, though it will load on all pages.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-07-12T20:13:26.467Z
Answers.Text: 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.
Answers.UserDisplayName: CiviNotASuperUser
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-07-12T22:07:39.010Z
Answers.Text: I've used CSS Injector for this on D7 (Asset Injector on D8).
Answers.UserDisplayName: Lars SG
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-07-13T09:13:14.433Z
Answers.Text: 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.
Answers.UserDisplayName: CiviNotASuperUser
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-07-13T13:56:10.090Z
Answers.Text: You should be able to set the path for the rule in CSS Injector. Unless that doesn't work with angular pages?
Answers.UserDisplayName: Lars SG
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-07-17T14:26:59.730Z
Answers.Text: It should work if embedded on an afform. Afform routes are "real" pages :)
Answers.UserDisplayName: Coleman
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-07-12T18:32:24.510Z
Answers.LastActivityDate: 2023-07-12T18:32:24.510Z
Answers.UserDisplayName: Lars SG
Body: <p>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:</p>
  <p><a href="https://i.sstatic.net/K8eZj.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/K8eZj.png" alt="enter image description here" /></a></p>
  
Tags: <searchkit><css>
Title: CiviCRM SearchKit Field Style
ThreadText: # CiviCRM SearchKit Field Style
  
  (Asked by: username_0 on 2023-07-12)
  
  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](https://i.sstatic.net/K8eZj.png)](https://i.sstatic.net/K8eZj.png)
  
  **Tags:** searchkit, css
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2023-07-12. Score: 2
  
  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.
  
  > **Comments:**
  > **username_0**: 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.  
  > **username_1**: I've used CSS Injector for this on D7 (Asset Injector on D8).  
  > **username_0**: 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.  
  > **username_1**: You should be able to set the path for the rule in CSS Injector. Unless that doesn't work with angular pages?  
  > **username_2**: It should work if embedded on an afform. Afform routes are "real" pages :)  
  
  ---
  
  