How to update the background header color in the Next UI

Vincent Daniele
Tera Contributor

Before the Next UI, we always had a different background color on all of our lower environment instances to quickly tell them apart. After switching to Next UI we lost that capability and I did a lot of searching on how to regain this functionality.  I could not find the answer in one spot. After much searching I was able to cobble together the solution and I am passing those results on here. We have tested this and have not had any issues. 

VincentDaniele_0-1668693369619.png

 

  1. Go to sys_ux_style.list
    1. Open Colors
      1.       Copy All of JSON in the style box
    2. Return to the UX Styles List and Click New
      1. Enter a name
      2. Paste in the JSON you previously copied
      3. Search for “now-unified-nav_header--background-color”
        1. In the Red text change the default color to the RGB color you want (hint: if you scroll to the top of the style you will see many examples of RGB colors you can copy)
        2. Click Submit

 

  1. Go to sys_ux_theme.list and click new
    1. Give it a name
    2. On the Compositional App Theme Click on the style column and choose the style you created in the previous step
    3. Then use the insert a new row  functionality and add three more styles
      1. UI16 Dashboard Visualization Compatibility
      2. Shape and Form
      3. Typography
    4. Save the Theme
    5. Ensure all the styles have an order of 0 and a type of Core
    6. Copy the sys id
  2. Got to sys_properties.list and click NEW
    1. Name - glide.ui.polaris.theme.custom
    2. Type – string (should be default)
    3. Value – the sys id from previous step
    4. SAVE
  3. Log out and log back in again and the new banner should be available
  4. Ensure tables sys_ux_style and  sys_ux_theme are excluded from a clone back

I hope this helps all others that have struggled with this 

10 REPLIES 10

rteggleston
Tera Contributor

These instructions worked perfectly, thank you.  It is sad though that you have to go through all of that just to change a banner color.  Applications should become easier to use the older they get, not more difficult.