How to update CSS for "Opens in new tab" icon
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
06-04-2025 03:01 PM
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
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!