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?
That did it! Thanks, @Brian_McLeer !
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
@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>
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.
@AndyKubrin is the AGOL item you are working with publicly accessible?
@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!
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>
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.
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.
I would use HTML styling via the text element approach for styling your pop up.
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
