Hello Everyone,
In the Polaris UI in Tokyo (and probably SanDiego), when you click on the All, Favorites, History or workspaces menu's,
you might have noticed that there is a background image that shows up (an SVG image) that shows a small design behind the menu.
If you would like to remove it from the background and make the menu look clean, here are some tips for you on how to remove the background image.
Pre-requisite: Polaris UI must be enabled
Steps to remove background.
1. Create an update set in global scope and set it as current update set in progress.
Lets assume the name of set as : "Polaris UX Customization"
2. Go to "sys_ux_style.list" and create a new record as shown in below screenshot.
Please use the JSON style below for your convenience.
{
"properties" : {
// Below setting removes the background image
// Image still loads in browsers but it will be invisible with below setting
"--now-unified-nav_menu--background-image-alpha" : "0",
// Below setting makes sure that background color is not too transparent.
// Setting it to 1 removes makes sure that there is no transparency at all
// You may adjust this as per your preference
// Default is 0.9 but if you have customized light color for navigation menu background,
// the contents under the menu may be visually incovenient and
// you may want to remove any transparancy using this approach
"--now-unified-nav_menu--background-color-alpha" : "0.96"
}
}3. Open the created style record and go to the "UX Theme Styles" related list.
Click on the "New" button and create a record with below values and submit it.
4. Go to ServiceNow home page and check click on the menus. You will not see the background image now.
Please check resultant menu without background below.
Look and feel of navigation menu before above changes for your reference.
5. Complete the update set, and move to next instance as required.
Hope this helps you to understand how to perform UX style customizations without modifying OOB code supplied.
Thanks and regards,
Subrahmanyam Satti
