Change table row color based on user status

Created on 20 April 2025, 5 days ago

Problem/Motivation

Hello - I have a View with table results showing users in the system. Each table row corresponds to 1 user. I would like to change the background of the table rows such that if the user's status is blocked, I want the table row to have a red background. This is what I have currently as a set up:

  • Within the View configuration --> Table --> Settings, I set Row Class to {{ status }} (i.e. the status of the corresponding user). The output format of user status is either "activated" or "deactivated"
  • Within the Solo Appearance settings --> Global Site settings --> CSS Injector, I entered the following:
#page-wrapper { table tr:deactivated td {
	background-color: red;
}}

When I load the table, I do see that class="deactivated" is added to the table row for deactivated users (see screen capture attached). But the row background is not displaying in red. I'm not sure what I'm doing wrong. Thank you for any suggestions!

πŸ’¬ Support request
Status

Active

Version

1.0

Component

User interface

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @ikam
  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX

    Hello,

    Thank you for providing detailed information about your setup. Based on your description, it appears that the issue lies in the CSS selector used within the CSS Injector.

    #page-wrapper {
      table tr:deactivated td {
        background-color: red;
      }
    }

    The selector tr:deactivated is not a valid CSS pseudo-class, which is why the background color isn't being applied.

    To apply a red background to table rows with the class deactivated, you should adjust your CSS as follows:

    #page-wrapper table tr.deactivated {
        background-color: red;
    }

    Best wishes,
    Alaa

  • Hi Alaa - Thank you so much for your help - I fixed my CSS per your suggestion and now my table rows are displaying the correct background! Much appreciated!

Production build 0.71.5 2024