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!

Makes sense.. Thank you for the inputs.