topic Re: How do I style a pop-up? in ArcGIS Online Questions

How do I style a pop-up?

AndyKubrin — Fri, 20 Jun 2025 17:26:26 GMT

How do I style the type in a pop-up? In the attached screen shot, the text seems to faint and too small to me. I want to set the color to #00000 and bump up the size to 14 or 16 px.

There must be a way. Can someone tell me?

Re: How do I style a pop-up?

Brian_McLeer — Fri, 20 Jun 2025 17:31:08 GMT

I would use HTML styling via the text element approach for styling your pop up.

Re: How do I style a pop-up?

AndyKubrin — Fri, 20 Jun 2025 18:14:43 GMT

Hi @Brian_McLeer

That makes sense, but how do you access this interface? I can’t find it.

Is it in Map Viewer? Or via the Details page?

Thanks.

Re: How do I style a pop-up?

Brian_McLeer — Fri, 20 Jun 2025 19:06:54 GMT

It is in the map viewer, click on the layer you want to update pop ups for and then on the right click on pop ups. Make sure they are enabled to access the ability to add elements.

Re: How do I style a pop-up?

AndyKubrin — Fri, 20 Jun 2025 20:33:43 GMT

Hmm, strange.

I see a way to style the title and description, but not the fields. Am I missing something?

Thanks.

Re: How do I style a pop-up?

Brian_McLeer — Fri, 20 Jun 2025 21:20:16 GMT

To get custom styling, you may need to remove the fields and rely on the HTML within the text element completely. This may also be possible with some advanced arcade using the arcade element.

For the title, it looks like you cannot use HTML but you could look into advanced Arcade with some custom styling.

Re: How do I style a pop-up?

Brian_McLeer — Fri, 20 Jun 2025 21:27:33 GMT

I think I found a workaround for you:

1. You cannot delete the title element, but you can set it to blank so it will hide it.

2. Use HTML text element to customize styling for title and field.

Sample Code:

<div style="font-family:sans-serif;"> <h3 style="color:blue;"> <strong>Title: {DISTRICT}</strong> </h3> <p> The city is <span>{DISTRICT}</span> and website is <a href="" target="_blank">{URL}</a> </p> </div>

(view in My Videos)

Re: How do I style a pop-up?

AndyKubrin — Mon, 07 Jul 2025 17:11:11 GMT

@Brian_McLeer This is a really interesting approach, and I've been experimenting with it, but I can't quite make it work.

I wrote code to style the heading and include the fields in a <table> element. It works well in the Gitlab HTML editor, but in ArcGIS Online, in the text field for the popup, I get raw HTML rather than rendered HTML output. (It is correctly showing the field values, at least.)

Here's the code I added to the text field:

<div style="font-family:sans-serif;"> <h3 style="color:#1F77B5;"> <strong>{Site}: {Location}</strong> </h3> <table style="font-family:sans-serif; width:100%; align:left;"> <tr> <th>Latitude</th> <td>{Latitude}</td> </tr> <tr> <th>Longitude</th> <td>{Longitude}</td> </tr> <tr> <th>Notes</th> <td>{Note}</td> </tr> </table> </div>

The attached screen cap shows the output in the pop-up. Do you have any idea what I'm doing wrong here?

Thanks in advance if you can help!

Re: How do I style a pop-up?

Brian_McLeer — Mon, 07 Jul 2025 17:24:07 GMT

@AndyKubrin is the AGOL item you are working with publicly accessible?

Re: How do I style a pop-up?

AndyKubrin — Mon, 07 Jul 2025 18:06:01 GMT

Yes, at:

https://imw.maps.arcgis.com/home/item.html?id=7bc3c8bcf2e04e99aa160171a8124ea1

The "good" layer with the features is currently hidden, and the "experimental" layer is showing. Editing isn ot enabled, though.

Re: How do I style a pop-up?

Brian_McLeer — Mon, 07 Jul 2025 19:08:56 GMT

@AndyKubrin when I look at the pop up settings, it looks like the HTML is in plain text. You might need to click Source button first, then apply HTML, exit source, then save.

When I apply the below code, this is how it looks for me. I did not save the web map, but this may work for you.

<div style="font-family:sans-serif;"> <h3 style="color:#1F77B5;"> <strong>{Site}: {Location}</strong> </h3> <table style="font-family:sans-serif; width:100%; border-collapse: collapse;"> <tr> <th style="text-align:left; border: 1px solid #ccc; padding: 6px;">Latitude</th> <td style="border: 1px solid #ccc; padding: 6px;">{Latitude}</td> </tr> <tr> <th style="text-align:left; border: 1px solid #ccc; padding: 6px;">Longitude</th> <td style="border: 1px solid #ccc; padding: 6px;">{Longitude}</td> </tr> <tr> <th style="text-align:left; border: 1px solid #ccc; padding: 6px;">Notes</th> <td style="border: 1px solid #ccc; padding: 6px;">{Note}</td> </tr> </table> </div>

Re: How do I style a pop-up?

AndyKubrin — Mon, 07 Jul 2025 19:20:29 GMT

That did it! Thanks, @Brian_McLeer !

Re: How do I style a pop-up?

Brian_McLeer — Mon, 07 Jul 2025 19:27:10 GMT

Glad it worked! Found this article as well which may be useful.

https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/authoring-pop-ups-using-html-source-editing