How to update CSS for "Opens in new tab" icon

Michael T
Tera Contributor

MichaelT_0-1749073674797.png

MichaelT_2-1749074463488.png

 

 

Above is the icon in question the "Opens in new tab" icon it is in my esc portal when I use the search I have a requirement to make its color #800000 (similar to a maroon-type color)

 

I am experienced in updating the CSS of different elements in my ESC portal by updating the CSS in the EC Theme record which is associated with my esc portal. I always inspect my element with the developer tools to see what css to target, as below

MichaelT_1-1749073778473.png

So in developer tools you can manually update the css, I can in this case in the developer tools change the .now-icon fill to be #800000 and it does update the icon, but when I make the same changes in my EC theme, there are no changes. I have tried other child/parent elements to target such as .now-button-iconic.is-bare:focus:focus, but there is again no changes. I have also tried to add the "!important" to the css, such as below

.now-icon.-sm {
color: #800000 !important;
fill: #800000 !important;
}

I suspect this may have something to do with Shadow DOM or there is some aspect of these icons in particular I'm not finding documentation on. Again, I have had success in updating the CSS of other elements in my esc portal, but this icon in particular I am having great difficulty with - perhaps it is not editable, but I would like some confirmation if possible if you have experience with this very particular icon. Thank you folks!

 

0 REPLIES 0