Change Image-Occlusion-Box colour in Closet Add-On

Card Design
1

Hello!
I use the Closet Add-On for my Image Occlusion Cards so I can use the feature which let’s me incrementally reveal the boxes on the card.
Now I’d really like to change the colour of the Image-Occlusion-Boxes - does anybody know how? I’ve tried to implement a few things in HTML or CSS using ChatGPT, but I don’t know coding so I’m just stepping in the dark at this point.
Would love some help!

2

Hey!
You can overwrite the color values defined in the extension source code (search for the repository hgiesel/closet on github to find it).
In your case, the color values are defined in the file /workspaces/closet/style/_rect.scss, containing the following CSS:

@use "utils";

@mixin rect {
  .closet-rect__rect {
    fill: moccasin;
    stroke: olive;

    .is-active & {
      fill: salmon;
      stroke: yellow;
    }

    .is-back.is-active & {
      fill: transparent;
      stroke: transparent;
    }
  }

  .closet-rect__ellipsis {
    fill: transparent;
    stroke: transparent;
  }

  .closet-rect__label {
    stroke: black;
    stroke-width: 0.5;
  }
}

To overwrite these values, you can add the selector .closet-rect__rect to your own CSS and define some alternative colors like this:

  .closet-rect__rect {
    fill: blue;
    stroke: red;

    .is-active & {
      fill: transparent;
      stroke: black;
    }

    .is-back.is-active & {
      fill: transparent;
      stroke: yellow;
    }
  }
2 Likes
3

It’s easier to modify web/closet.css in the installed add-on’s folder, as that doesn’t require rebuilding the add-on.

1 Like
4

Yes, that’s what I meant with the second part of my answer.
Just wanted to clarify how I got there.

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.