How to change the color from the UMP Menu

book

Article ID: 35860

calendar_today

Updated On:

Products

DX Infrastructure Management NIMSOFT PROBES

Issue/Introduction

Introduction:

This document will teach you how to customize the colors of the UMP Menu to black, but you can change to any color you want.

Before we start, it's important to notice that we'll be using CSS to customize the Portal and this affects all the users on the account, because we're editing the Private Pages of the account.

Instructions:

1) Login on the user you want to change the color.

 

2) Now, click on Manage, then Page.

<Please see attached file for image>

3) Click on Private Pages (or the name of your view).

<Please see attached file for image>

4) By default you’ll be on the “Look and Feel” configuration, if not, please select it on the right pane.

<Please see attached file for image>

 

5) Now scroll down to the CSS section and put the following codes as you need.

To change the menu color

#navigation {

background-image:none !important;

background-color: #000000 !important;

}

Change the #000000 to the color you want in the background of the menu (Go To Additional Information section for a link with HTML Colors reference).

If you click save:

<Please see attached file for image>

You’ll get this:

<Please see attached file for image>

To change the buttons colors

#navigation .selected a, #navigation li.hover a, #navigation a:hover, #navigation a:focus, #navigation .child-menu li a, #navigation .child-menu .grandchild-menu li a, #navigation .yui3-dd-dragging, .lfr-navigation-proxy {

  background: #000000 !important; 

  color: #FFF !important;

} 

Change the #000000 to the color you want in the background of the buttons (Go To Additional Information section for a link with HTML Colors reference).

Change the #FFF to the color you want the menu text (Go To Additional Information section for a link with HTML Colors reference).

If you click save:

<Please see attached file for image>

You’ll get this:

<Please see attached file for image>

 To change the delete page button color

.modify-pages .delete-tab {

  background-color: #000 !important;

}

Change the #000 to the color you want in the background of the button. (Go To Additional Information section for a link with HTML Colors reference)

If you click save:

<Please see attached file for image>

You’ll get this:

<Please see attached file for image>

6) Here’s how my CSS section looks with all the codes.

<Please see attached file for image>

Additional Information:

 

W3Schools CSS Text Reference

W3Schools HTML Color Picker

Color Picker

Environment

Release: CNMSPP99000-8.2-Unified Infrastructure Mgmt-Server Pack-- On Prem
Component:

Attachments

1558699515769000035860_sktwi1f5rjvs16ood.png get_app
1558699513901000035860_sktwi1f5rjvs16ooc.png get_app
1558699512087000035860_sktwi1f5rjvs16oob.png get_app
1558699510324000035860_sktwi1f5rjvs16ooa.png get_app
1558699508677000035860_sktwi1f5rjvs16oo9.png get_app
1558699506788000035860_sktwi1f5rjvs16oo8.png get_app
1558699504957000035860_sktwi1f5rjvs16oo7.png get_app
1558699502776000035860_sktwi1f5rjvs16oo6.png get_app
1558699500184000035860_sktwi1f5rjvs16oo5.png get_app
1558699498131000035860_sktwi1f5rjvs16oo4.png get_app