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.
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>