Welcome to Community Week 2025! Join us to learn, connect, and be recognized as we celebrate the spirit of Community and the power of AI. Get the details  

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