🔗 CSS Hack: Dynamic CSS in Glide 2 via URL Fragment

[Himaladin]

Use image URL fragments as lightweight, reliable selectors.

I previously shared CSS Hack: Dynamic CSS in Glide — a method relying on Rich Text injection — and also using attributes already available in Glide: https://community.glideapps.com/t/css-hack-dynamic-css-in-glide/85080/4.

However, many of Glide’s built-in attributes are not stable as selectors because they may be translated. A more reliable method is to append a fragment at the end of the image URL.

Example
Note: The following example is for Collection components.

Add a fragment to your image URL:

https://your-image.com/photo.png#tag

Target any component that uses the image URL ending with that fragment (#tag):

.custom-class [data-testid="cc-card"]:has(img[src$="#tag"]) {
    border: 3px solid red;
}

Using image URLs with fragment identifiers like #active, #inactive, or #blocked provides a much more stable selector than relying on most built-in Glide attributes, which may be automatically translated or altered by the app or browser.

---

Example code according to Screenshot

/* Blocked user */
.custom-class [data-testid="cc-card"]:has(img[src$="#blocked"]) {
    border: 3px solid red;
}

/* Inactive user */
.custom-class [data-testid="cc-card"]:has(img[src$="#inactive"]) {
    border: 3px solid #00b703;
}

/* Style meta text inside the card */
.custom-class [data-testid="cc-card"] p:nth-child(1) {
    padding: 3px 10px;
    color: white;
    width: fit-content;
    border-radius: 20px;
    margin-bottom: 10px;
}

/* Blocked user */
.custom-class [data-testid="cc-card"]:has(img[src$="#blocked"]) p:nth-child(1) { background: red;}

/* Inactive user */
.custom-class [data-testid="cc-card"]:has(img[src$="#inactive"]) p:nth-child(1) {background: #00b703;}

/* Active user */
.custom-class [data-testid="cc-card"] p:nth-child(1) {background: #555;}

You can also hide the image entirely if you don’t want it to display:

.custom-class [data-testid="card-image"] { 
    display: none;
}