Conditional styling for list items

Feature Requests
1

I would like to be able to add custom styling to list items based on certain conditions (similar to the way that action buttons can now be displayed only when they meet certain conditions).

Example:
I have a list of products. I want to highlight all products that belong to the logged in user with a special color.

A quick help could also be the ability to set custom css classes per item based on certain conditions.

4 Likes
2

Def upvoting this. See also our case here.

3

I have a prototype working for this. Would a step-by-step guide be helpful?

Screenshot 2024-08-09 at 3.30.57 PM
Screenshot 2024-08-09 at 3.30.57 PM1692Ă—1518 152 KB

2 Likes
4

Hi @sahilkhosla ! That sounds great! Code/step-by-step instructions would be hugely appreciated!

This is a valuable feature that would satisfy multiple user requirements.

2 Likes
5

We are looking for the same feature. Would be great to have.

1 Like
6

Sounds good, will write it up soon!

2 Likes
7

Hi Sahil - did you ever write this up? It would be super useful.

1 Like
8

I didn’t. Back to you soon!

9

Here it is…

Live Demo :point_down:

How to Implement

1 - Airtable Setup

Screenshot 2025-04-07 at 12.57.29 PM
Screenshot 2025-04-07 at 12.57.29 PM2544Ă—904 226 KB

  1. Add a field to identify featured, sponsored, etc.
  2. Add a formula field to create HTML (if checked)
IF(Featured, "<span class=\"featured\">Featured</span>")

2 - Softr Setup

Screenshot 2025-04-07 at 1.00.15 PM
Screenshot 2025-04-07 at 1.00.15 PM2592Ă—820 177 KB

  1. Map the HTML field in the section below the image. You should now see the “Featured” text on the card.
  2. Add a custom code block and add the CSS (given below)
  3. Voila! :tada:

Custom Code (CSS)

<style>
    span.featured {
      display: inline-block;
      padding: 4px 8px;
      background-color: #ffffff; 
      color: #003366; 
      font-size: 12px;
      font-weight: 600;
      border-radius: 12px;
      margin-top: 8px;
    }
    
    div[role="listitem"] > div:has(span.featured) {
      background-color: #004080; 
      color: #ffffff;            
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      background-image: url('https://www.transparenttextures.com/patterns/wavecut.png'); 
    }
    
    div[role="listitem"] > div:has(span.featured) h2 {  
        color: #ffffff;            
    }
    
    div[role="listitem"] > div:has(span.featured) svg {
      color: #ffffff !important;
    }
</style>
1 Like