Need Help - CSS For background Of Card Based Of Dynamic Data

Ask for Help
1

Screen Shot 2024-10-07 at 4.31.30 PM
Screen Shot 2024-10-07 at 4.31.30 PM729×622 45.5 KB

Trying To Change The Back Ground Of Each Card Based Off Condition In Data

Engine Down - Red
Engine Okay - Nothing
Engine In Maintainance - Yellow

How Would I Go About Adding A Css Class To Do This?

2

I’m not sure if there is CSS that can dynamically change each card background within a collection but you can use an if-then-else column to display the image you want (red/yellow/etc.) and use CSS to overlay your text similar to what was done here:

1 Like
3

The trick here is adding rich text components that contains specific classes, and show/hide them based on your engine status.

Then use :has() in your CSS code to style the card based on the rich text component that is currently visible.

2 Likes
4

does the rich text component point to a column in your dataset?

5

Here’s an option without CSS using a custom collection and rich text component. I imagine an ITE column that rules the color and then replace the background color in a template column.

Click here for code 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Card Example</title>
</head>
<body style="background-color: #1f1f1f; margin: 0; padding: 0;">
    <div style="background-color: #333; color: white; width: 100%; padding: 20px; box-sizing: border-box; border-radius: 8px; height: 350px;">
        <div style="display: flex; align-items: center;">
            <img src="upload://dLeSGfMFyz0uhBHy9e7hiFCwNHZ.jpeg" alt="Card Image" style="width: 40px; height: 40px; border-radius: 8px; margin-right: 10px;">
            <div style="display: flex; flex-direction: column; justify-content: center;">
                <div style="font-size: 1em; font-weight: bold; margin-bottom: 5px;">BASIC INFORMATION</div>
                <div style="font-size: 0.9em; color: #ccc;">Your account information</div>
            </div>
        </div>
        <div style="margin-top: 25px;">
            <div style="font-size: 0.75em; color: #8c8c8c; font-weight: bold; margin-bottom: 2px;">NAME</div>
            <div style="background-color: #444; padding: 10px 15px; border: 1px solid #555; border-radius: 6px; color: #ccc; font-size: 1em; min-height: 40px;">{NAME}
            </div>
        </div>
        <div style="margin-top: 20px;">
            <div style="font-size: 0.75em; color: #8c8c8c; font-weight: bold; margin-bottom: 2px;">USERNAME</div>
            <div style="background-color: #444; padding: 10px 15px; border: 1px solid #555; border-radius: 6px; color: #ccc; font-size: 1em; min-height: 40px;">{USERNAME}
            </div>
        </div>
        <div style="margin-top: 20px;">
            <div style="font-size: 0.75em; color: #8c8c8c; font-weight: bold; margin-bottom: 2px;">EMAIL</div>
            <div style="background-color: #444; padding: 10px 15px; border: 1px solid #555; border-radius: 6px; color: #ccc; font-size: 1em; min-height: 40px;">{EMAIL}
            </div>
        </div>
    </div>
</body>
</html>

Screenshot 2024-10-07 at 7.55.20 PM
Screenshot 2024-10-07 at 7.55.20 PM1248×386 15.1 KB

3 Likes
6

love the flexibility of this! :raised_hands:

1 Like
7

Haven’t you considered using Kanban?

1 Like
8

I am on a free plan using Rich Text and CSS.
This is the output

image
image363×644 33.2 KB

Using a custom collection component to read my wallpaper data.
image

Data columns with boolean and if else to check for conditions.
imagel

And template column to contain the CSS

image
image370×606 32.9 KB

The html code with inline style

  <!-- Badge -->
  <div style="position: absolute; top: 10px; right: 10px; background-color: COLOR; color: white; padding: 5px 10px; border-radius: 12px; font-size: 15px; font-family: 'Trebuchet MS', 'Helvetica', sans-serif;
font-weight:900;">
   🔥 ROAST
  </div>
5 Likes
9

nice! Are you happy with the result? If you want to tweak the appearance, just let us know.

1 Like