How to change the color from the UMP Menu

Document ID : KB000035860
Last Modified Date : 14/02/2018
Show Technical Document Details

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.

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

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

 

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:

You’ll get this:

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:

You’ll get this:

 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:

You’ll get this:

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

Additional Information:

 

W3Schools CSS Text Reference

W3Schools HTML Color Picker

Color Picker