How do I style a pop-up?

[AndyKubrin]

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?

[Brian_McLeer]

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

[AndyKubrin]

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.

[Brian_McLeer]

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. 

[AndyKubrin]

Hmm, strange.

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



Thanks.

[Brian_McLeer]

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.

[Brian_McLeer]

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>

[AndyKubrin]

@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!

[Brian_McLeer]

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

[AndyKubrin]

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.