# CSS: Custom color for map pins

**URL:** <https://community.glideapps.com/t/css-custom-color-for-map-pins/30641>\
**Category:** Ask for Help\
**Created:** [August 18, 2021, 1:49pm UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641 "2021-08-18T13:49:18Z")\
**Posts on this page:** 7\
**Page:** 3

<div class="post-metadata">

**Author:** ![abdo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abdo/32/36540_2.png) [@abdo](https://community.glideapps.com/u/abdo)\
**Post date:** [February 28, 2023, 5:30am UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/41 "2023-02-28T05:30:22Z")

</div>

Oh!  
I have it set up on apps long time ago!  
I was referring to pages.  
The post above mentioned this was a pages fix.

all i did was post the css in the appearance tab of the settings  
.css-map svg path {  
fill: #db3553 !important;

has anyone got it working on pages? or is that impossible

I need to compare to sets of pins and switch in between them according to the path of our drivers.

---

<div class="post-metadata">

**Author:** ![abdo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abdo/32/36540_2.png) [@abdo](https://community.glideapps.com/u/abdo)\
**Post date:** [February 28, 2023, 5:31am UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/42 "2023-02-28T05:31:27Z")

</div>

I was thinking at first to update all pin colors & then dig into splitting them into 2 groups.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 28, 2023, 1:00pm UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/43 "2023-02-28T13:00:03Z")

</div>

Seems like the class name changed since @elmerdubon 's comment. I adjusted a bit and got it working.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/b/bbb64a4ba5eb2ddc12d70d6b3805c2a69549cd58.jpeg)

Please change it to this:

```auto
.mapboxgl-marker div[title="Title 1"] svg path {
  fill: #db3553 !important;
}

.mapboxgl-marker div[title="Title 2"] svg path {
  fill: #3ac57a !important;
}

```

---

<div class="post-metadata">

**Author:** ![abdo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abdo/32/36540_2.png) [@abdo](https://community.glideapps.com/u/abdo)\
**Post date:** [February 28, 2023, 1:03pm UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/44 "2023-02-28T13:03:34Z")

</div>

amazing… that got it to work  
thank you very much

it would have to be based on the title right? no chance we can color the pins according to the description field?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 28, 2023, 1:09pm UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/45 "2023-02-28T13:09:29Z")

</div>

Yeah, title is the only thing that is referenced in the code structure.

---

<div class="post-metadata">

**Author:** ![David\_Gabler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/david_gabler/32/44332_2.png) [@David\_Gabler](https://community.glideapps.com/u/David_Gabler)\
**Post date:** [February 28, 2023, 4:14pm UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/46 "2023-02-28T16:14:51Z")

</div>

But this will require an account type that supports CSS?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 1, 2023, 12:17am UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/47 "2023-03-01T00:17:23Z")

</div>

Yes, only on Business and Enterprise plans.

[Previous page](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641.md?page=2)