Hi Urva,

Finally get what you want.

You can take css styles below as an example, and feel free to change the rgba color to your favourite.

/**PPM Menu**/

#ng-topmenu .menu .submenu .item.hover {
background-color:rgba(231,55,0,0.1);
color: #fff;
}

.yui-skin-ppm .yuimenuitem-selected,
.yui-skin-ppm .yuimenuitem-hassubmenu-selected {
background-color:rgba(231,55,0,0.1);
color:white;
}

/**Table component**/

.tcMenu {
background: none;
background-color: rgba(231,55,0,0.5);
}

Paste it into theme color customization css editor and save.

Hi Joe,

This worked, yes we are aware the flexibility Theme customization now provides which is really beneficial. However where and how do we know which functions to use as there is no list of functions provided apart from those in global style sheet.

Thank you for the suggestions above, they seem to work. One Last, need the function that can help change the background color of the table component help text as highlighted below.

Hi Urva,

The css editor in theme customization page need frontend developer skills to input.

Sorry we can't list all class names for all global style sheet, and it's also not possible.

My advice is you open chrome developer tool and choose the element you want to customize, like picture below:

SO, you can change class the instructionTable class style like below:

/**Table instruction div**/
.instructionTable {
background-color: red;
border: 1px solid red;
}

Feel free to change red color to your favourite.

Thank you!! Will try it out 

This does not seem to work on our side.. I need help with few more.

1. The GRID for the picklist / autocomplete list validation

2.  The panel behind the buttons

3. All the dashboard grids for list and pivot dashboards.

Hi Joe,

Please find the details. Do let me know if you need anything else. 

1. Need to change the GRID for the picklist / autocomplete list validation, need to change from white and grey to white and light orange. The header from grey need to change change

2.  The panel behind the buttons which is plane white need to change it to cream.

3. Grids on the dashboards, need to change from white and grey to white and light orange. The dashboard headers need to change from Grey to Blue

Hi Joe,

Please find the details. Do let me know if you need anything else. 

1. Need to change the GRID for the picklist / autocomplete list validation, need to change from white and grey to white and light orange. The header from grey need to change change

2.  The panel behind the buttons which is plane white need to change it to cream.

3. Grids on the dashboards, need to change from white and grey to white and light orange. The dashboard headers need to change from Grey to Blue

Hi Urva,

Right now 1) & 3) are not supported, and the 2) you mean the sectionsTopBar with "expand all" and "collapse all" buttons?

if so you can change it's bgcolor like below:

.sectionsTopBar{
background-color: red;
}

Feel free to change the red colot to your favoirte.

Thanks,

Joe

Hi Joe, Sorry to bother you. But few more places where I need your help.

1. Workflow action buttons color, does it only take color from "Default Color" under Theme Customization?

Here is the theme customization we have.

The workflow buttons show in orange. Is there a way to override the color? I added this in the CSS but does not seem to work

/* Generic Buttons */
.button-bright {
color:#000000;
background-color:#0E5447;
/*new button style */
.btn-primary {
border-color: #0E5447;
background-color: #0E5447;
color: #fff;
}

2. We also want to change color and font of the message box that pops up on "show message" rule.

Urva said:

Workflow action buttons color, does it only take color from "Default Color" under Theme Customization?

Yes, it depends on the "Defeult Color".

But there is a way to change it:

/**action buttons**/
.topButton1, .topButton2, .topButton3, .topButton4, .topButton5, .topButton6 {
border: 1px solid rgba(14, 84, 71);
border-radius: 2px;
color: rgba(14, 84, 71);
}
a.topButton1:hover, a.topButton2:hover, a.topButton3:hover, a.topButton4:hover, a.topButton5:hover, a.topButton6:hover{
background: rgba(14, 84, 71, 0.05);
}
a.topButton1:active, a.topButton2:active, a.topButton3:active, a.topButton4:active, a.topButton5:active, a.topButton6:active{
background: rgba(14, 84, 71, 0.1);
}

Urva said:

We also want to change color and font of the message box that pops up on "show message" rule

Sorry, there is no way to change it. It's a browser-provided function inside. But you can customize your own  "showCustomizeMessage" function.

This worked. Hopefully the last one. We want to highlight the selected tabs (in green box) with separate colors. 

/**request tabs**/
.project-tab-selected {
background-color: #2233a361;
color: black;
}

#request-tabs-nav .request-tab-item.active {
background-color: #2233a361;
color: black;
}

Feel free to change the color(font color) and bgcolor to your favourite.

Thank you Joe. I wish there was a cook book with all this information.

Few more

1. Colors for buttons Copy Link other ootb buttons in red box

2. Request tabs : Inactive and the background to match the project tabs

3. Font for left navigation

Hi Urva,

Urva said:

I wish there was a cook book with all this information.

I hope you can understand that this feature requires the experience and skills of a front-end developer.

Or a developer who has accumulated certain knowledge about css styles.

You can learn from this website: developer.mozilla.org/.../CSS_basics

Css below can meet your requirement. Feel free to change the bgcolor to your favourite.

#sidebarInnerContentShow .jumpToDiv{
background-color:rgba(143, 22, 193, 0.1);
}

.project-title-container .actionGroup{
background-color:rgba(143, 22, 193, 0.1);
}

.actionGroupContainer #copyLink,
.actionGroupContainer #requestMoreActions,
.actionGroupContainer #copy{
background-color:rgba(143, 22, 193, 0.1);
}

We were unable to make the fonts change in the left navigation window.

Also, We need the background to change highlighted in Green Is this possible?

One other thing we noticed the individual expand and collapse of the sections are arrows vs +/- sign is there a way to revert or set it to +/- as shown below

Hi Urva,

The arrow-based folding sections are aligned with recommendations from our UX Design department - I strongly advise you to go with these product changes and do NOT try to always rolback modifications done to the UX in upgrades through CSS customization. 

We will not provide you any assistance for you to customize PPM UI back into its old style - that's only likely to cause you some UI trouble in future upgrades.

Thanks for your understanding!