# 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:** 20\
**Page:** 2

<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 2, 2022, 11:44pm UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/21 "2022-03-02T23:44:08Z")

</div>

Can you show me a screenshot of your template CSS column and a sample result of that template column?

---

<div class="post-metadata">

**Author:** ![Gideon\_Lahav\_Busines](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gideon_lahav_busines/32/41121_2.png) [@Gideon\_Lahav\_Busines](https://community.glideapps.com/u/Gideon_Lahav_Busines)\
**Post date:** [March 3, 2022, 12:05pm UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/22 "2022-03-03T12:05:21Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/b/9b4b6f3d111dad97bc2c1622d015abce047915ed.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/7/d7bdfa7a8762279657cb80748b4f32768a02ea37.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/4/446d0ffd478b95193e4c4c91ffe264705265d74b.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/5/65aeb19653e90effa5f7f9ef0aeaefcfee50de05.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/b/fbbebb7dbe6302e39ba69eccf7f8a960ab8215ac.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/6/86e8091ff4e9b412c8dd87d2ba87a610593a098d.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/9/a979f0e621ae98a1d6edc93025a487b6bebaa401.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/7/e7f53572a6a6756435a0f3d5b7a4bb882c8dba43.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/1/1139b3a23332db0fa85535a0be8d60ae19f34776.jpeg)

@ThinhDinh

---

<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 4, 2022, 12:12am UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/23 "2022-03-04T00:12:56Z")

</div>

That looks like the right setup for me. I can only think that the reason that doesn’t work is that CSS doesn’t interpret non-Latin characters well.

If you can let me copy the app back or invite me to a team I might be able to look further into it.

---

<div class="post-metadata">

**Author:** ![Gideon\_Lahav\_Busines](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gideon_lahav_busines/32/41121_2.png) [@Gideon\_Lahav\_Busines](https://community.glideapps.com/u/Gideon_Lahav_Busines)\
**Post date:** [March 4, 2022, 1:03am UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/24 "2022-03-04T01:03:00Z")

</div>

Sure, I will give access to copy

---

<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 4, 2022, 3:53am UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/25 "2022-03-04T03:53:17Z")

</div>

So I gave a deeper look into the app and the cause of it was that Gideon had a filter on the tab level.

That leads to no rows being tied to the screen and when he references the code in a rich text component, it can’t read anything.

Removing the filters helped in this case, since he doesn’t need it.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [March 4, 2022, 3:56am UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/26 "2022-03-04T03:56:38Z")

</div>

The really nice thing about self-inflicted bugs is that they are usually very easy to fix 😂

---

<div class="post-metadata">

**Author:** ![travischristian](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/travischristian/32/49210_2.png) [@travischristian](https://community.glideapps.com/u/travischristian)\
**Post date:** [October 17, 2022, 6:13pm UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/27 "2022-10-17T18:13:12Z")

</div>

@ThinhDinh any idea if this works with Pages?

---

<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:** [October 18, 2022, 12:20am UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/28 "2022-10-18T00:20:29Z")

</div>

I haven’t tested CSS on Pages yet (you have to have a Business plan to be able to do it), but I assume it won’t be easy since apparently, they require you to write the code somewhere and not point it to a column like what we’re doing here.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/8/9848f54fcdadaf0c8234673360efd4d45b404f1d.png)

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [October 18, 2022, 12:47am UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/29 "2022-10-18T00:47:12Z")

</div>

> [@ThinhDinh](#):
>
> but I assume it won’t be easy since apparently, they require you to write the code somewhere and not point it to a column like what we’re doing here.

Yes, all of your CSS is pasted into a single input box in the Project settings panel.  
To me that’s not really an issue, as I always prefer to keep all CSS in one place anyway. eg in Apps all my CSS usually lives in my User Profiles table. The big advantage with Pages is you can define your own custom class for any component.

---

<div class="post-metadata">

**Author:** ![elmerdubon](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/elmerdubon/32/78942_2.png) [@elmerdubon](https://community.glideapps.com/u/elmerdubon)\
**Post date:** [January 12, 2023, 12:47am UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/30 "2023-01-12T00:47:08Z")

</div>

Here’s the code work for me in Pages css:

```auto
.css-map div[title="Category 1"] svg path {
  fill: #db3553 !important;
} 
.css-map div[title="Category 2"] svg path {
  fill: #3ac57a !important;
}

```

You need put in title component the category, but you can used variant selectors like: `|= ~= ^=` etc

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/5/6520a859f6fb2160bebe1cd4f9d7e8dad80e30cb.jpeg)

---

<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:** [January 12, 2023, 12:47am UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/31 "2023-01-12T00:47:58Z")

</div>

I imagine it won’t scale very well if you don’t know in advance the name of the categories.

---

<div class="post-metadata">

**Author:** ![elmerdubon](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/elmerdubon/32/78942_2.png) [@elmerdubon](https://community.glideapps.com/u/elmerdubon)\
**Post date:** [January 12, 2023, 12:57am UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/32 "2023-01-12T00:57:40Z")

</div>

If you just wanna change the overall color of pins, just remove the title part

```auto
.css-map svg path {
  fill: #db3553 !important;

```

---

<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:** [January 12, 2023, 2:57am UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/33 "2023-01-12T02:57:39Z")

</div>

Yeah, but I wish we can point it to a column in the user profiles row so we can get something dynamic.

---

<div class="post-metadata">

**Author:** ![Wendy.Molinares](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wendy.molinares/32/54262_2.png) [@Wendy.Molinares](https://community.glideapps.com/u/Wendy.Molinares)\
**Post date:** [February 12, 2023, 5:34am UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/34 "2023-02-12T05:34:43Z")

</div>

I’m going crazy with this one ☹  
does this still working? (app) and if so, does it need to be coordantes or can it be an address?

---

<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 12, 2023, 11:52pm UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/35 "2023-02-12T23:52:36Z")

</div>

It can still be an address, but I don’t recommend using this anymore since it will almost certainly not work in the future due to the transition from Apps to Pages.

---

<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 27, 2023, 9:38pm UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/36 "2023-02-27T21:38:42Z")

</div>

i can’t get the Map pin color to change in pages with this  
any idea what could be done?

---

<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, 12:48am UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/37 "2023-02-28T00:48:51Z")

</div>

If you want to go that way, you must change the “title” names (Category 1, Category 2) etc to your pins’ titles.

---

<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, 3:33am UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/38 "2023-02-28T03:33:02Z")

</div>

I did, i even tried changing all pin colors to one new color but couldn’t get it to work.

---

<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, 4:26am UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/39 "2023-02-28T04:26:04Z")

</div>

Can you send some screenshots on how you’re setting it up?

---

<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:26am UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/40 "2023-02-28T04:26:53Z")

</div>

It definitely does still work but I also struggled to get it working correctly. I did give up on that part of the project when I realized it would not work in pages. Pages is where I would need it to work.

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

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