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>