Next UI - Custom UX Style/Theme - How to change coloring in "Process Flow" chevrons & Related Lists

[apjohn2]

Trying to found out how to change the coloring of chevrons (Process Flow formatter) and Related List selected tab and font colors for a branded (custom) Next UI theme.

Please advise.

[Amit Gujarathi]

HI @apjohn2 ,
I trust you are doing great.

1. Identify the theme you are using or plan to create. If you are creating a new theme, make sure you have the necessary permissions to modify themes.

2. Access the theme settings by navigating to "UI Properties" -> "Themes" in the ServiceNow platform.

3. Locate the specific theme you want to modify and open its settings.

4. To change the chevron colors in the Process Flow formatter, you will need to override the CSS styles associated with it. Look for the CSS class or selector that applies to the chevrons and override the color property with the desired color value. For example, if the chevron class is .process-flow-chevron, you can add the following CSS code:

.process-flow-chevron {
  color: #ff0000; /* Replace #ff0000 with your desired color */
}

1. To change the selected tab and font colors in Related Lists, you will also need to override the CSS styles. Inspect the element using your browser's developer tools to identify the appropriate CSS class or selector. Then, override the background-color and color properties with the desired colors. For example, if the tab class is .related-list-tab-selected, and the font class is .related-list-title, you can add the following CSS code:

.related-list-tab-selected {
  background-color: #ff0000; /* Replace #ff0000 with your desired color */
  color: #ffffff; /* Replace #ffffff with your desired font color */
}

.related-list-title {
  color: #ff0000; /* Replace #ff0000 with your desired font color */
}

1. Save the changes to the theme settings.

2. Verify the changes by navigating to the affected pages or components using the custom Next UI theme.

[apjohn2]

Hello Amit. Thanks for the reply. I'm not sure if your advice is applicable. This is for a custom theme in Next UI, not UI16.

That being said, I did try your steps. Here are the results.

1. I followed the steps in the following link to create a custom theme in Next UI (we're on Tokyo): Manual Theme Creation (Tokyo/San Diego). I have admin rights; rights are not an issue.
2. The only "UI Properties" I find (in either Next UI (our dev instance) or UI16 (our test/prod instances) is under "System Properties". It is a module itself, not a separator (there are no modules beneath it). When I open it, I do not see anything there called "Themes".
3. (and on) - If I go to where I think you might have been trying to lead me ("System UI" > "Themes"), I can open any of the Themes and modify the CSS fields, but these do not apply to Next UI.

If you have any advice for Next UI custom themes I'd be happy to try. And I appreciate the effort nonetheless!

[apjohn2]

@Ashley Snyder Hope tagging you is OK. Your blogs here helped me a ton in branding Next UI; just hoping for some help w/ this little hurdle.

Note: I did find a reply elsewhere in community about changing the "Grouped Teal" to another color to sort of trick the CSS for these (the Process Flow chevrons at least; not sure about RL tab colors) but I'd really prefer to avoid that as I'm not sure where else that grouping might be applied.

Is this something I should submit a Case for in HISP, do you think?