Hi Urva,

Theme customization can make you change background/hover color on components, such as buttons, section header, grid header and so on.

And also, you can add css code block to customize some styles.

In short, you can change the style of any class on PPM pages.

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.

Sorry, I don't understand what you want to do.

Please describle with more details and with screenshot will be great.

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.