CSS: Custom color for map pins

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

1 Like


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.

1 Like

Sure, I will give access to copy

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.


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

1 Like

@ThinhDinh any idea if this works with Pages?

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.


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.


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

.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

1 Like

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

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

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

1 Like

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

1 Like

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

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.

1 Like

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

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

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

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

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.

1 Like