Select to view content in your preferred language

Portal for ArcGIS Map Viewer - 'html style' tags for colored text?

711
2
Jump to solution
01-12-2023 05:46 AM
VincentLaunstorfer
Frequent Contributor

Hi,

In ArcGIS Online/Portal for ArcGIS, I wish to add color on text in PopUps. As I cannot see any option for color setting

VincentLaunstorfer_0-1673531053991.png

I am using 'html style' source and I tried to add <font color="rgb(0, 0, 255)"> tag as follow:

<p>
<font color="rgb(0, 0, 255)">Text in red</font>
</p>

But it is ignored when interpreted in PopUps! And the <font color="rgb(0, 0, 255)"> tag disapears.

Is it normal behaviour? How can I tweak text color in PopUps?

 

in PopUps

0 Kudos
1 Solution

Accepted Solutions
JohannesLindner
MVP Frequent Contributor

The font tag has been deprecated. Instead, colors should be defined with css, either in a stylesheet (impossible for popups) or as inline style.

When I tested right now, the MapViewer automatically converted font tags to span tags with the appropriate color, but only for color names and hexcodes, not for rgb values. But those still work when you use the correct syntax.

<p>
    Using color names: <span style="color:red;">Red</span>, <span style="color:green;">Green</span>, <span style="color:blue;">Blue</span>
</p>
<p>
    Using hex codes: <span style="color:#ff0000;">Red</span>, <span style="color:#00ff00;">Green</span>, <span style="color:#0000ff;">Blue</span>
</p>
<p>
    Using rgb: <span style="color:rgb(255,0,0);">Red</span>, <span style="color:rgb(0,255,0);">Green</span>, <span style="color:rgb(0,0,255);">Blue</span>
</p>

JohannesLindner_0-1673534223280.png

 


Have a great day!
Johannes

View solution in original post

0 Kudos
2 Replies
JohannesLindner
MVP Frequent Contributor

The font tag has been deprecated. Instead, colors should be defined with css, either in a stylesheet (impossible for popups) or as inline style.

When I tested right now, the MapViewer automatically converted font tags to span tags with the appropriate color, but only for color names and hexcodes, not for rgb values. But those still work when you use the correct syntax.

<p>
    Using color names: <span style="color:red;">Red</span>, <span style="color:green;">Green</span>, <span style="color:blue;">Blue</span>
</p>
<p>
    Using hex codes: <span style="color:#ff0000;">Red</span>, <span style="color:#00ff00;">Green</span>, <span style="color:#0000ff;">Blue</span>
</p>
<p>
    Using rgb: <span style="color:rgb(255,0,0);">Red</span>, <span style="color:rgb(0,255,0);">Green</span>, <span style="color:rgb(0,0,255);">Blue</span>
</p>

JohannesLindner_0-1673534223280.png

 


Have a great day!
Johannes
0 Kudos
VincentLaunstorfer
Frequent Contributor

Great!

The color attribute is font tag is not working on its own, but as you said, it works embedded in an inline style... For me it kept the font tag as follow:

<p>
<font style="color:rgb(255,0,0);">Text in red</font>
</p>

And it works

Just a pity there is not a color shortcut button in the toolbar to apply color to text in PopUps design...

0 Kudos