Change The Default "Three Dots" Icon With Custom CSS In List Collection

Community Resources
1

Hey Gliders :playground_slide:,

I’ve found a way to change the default “three dots” icon in collections.

Guess what. It is only three steps! Or three dots :rofl:

  • Add the “custom-three-dots” class to your list collection.
  • Add the custom CSS below.
  • Change the background-image url to anything you want.
/* Custom Three Dots */
.custom-three-dots button[data-testid="menu-button"]:has(svg){
width:64px;
height:64px;
}
.custom-three-dots button[data-testid="menu-button"]:has(svg) > div:has(>svg){
position: relative; 
width:64px;
height:64px;
}
 .custom-three-dots button[data-testid="menu-button"] div:has(>svg):after {
            content: '';
            position: absolute;
            width: 100%;
            height:100%;
            background-image: url('image.png');
            background-size: contain;
            background-repeat: no-repeat;
            pointer-events: none;
}
/* END: Custom Three Dots */

Showcase

chrome_1thR2Ebxw0

5 Likes
2

That’s very cool! Nicely done, @MaximeBaker !

2 Likes
3

Thank you very much!

4

Thanks for sharing, I didn’t know I needed it until I saw how the collection changes by customizing those three dots…love it.

1 Like