Theme customization in 24.1

Question

Hi Etienne, 
 Thank you for your response on the the thread. Few question on the CSS I tried referring to Global style sheets but was not able to gather the tags. Need guidance on which tags should we use to customize the theme for 
 1. Color change when selected menu items as below. From Blue to customer color 
 
 2. Color change from Blue to customer color on the table component

Joe Zhang · Accepted Answer

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.

Joe Zhang · Answer

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.

Joe Zhang · Answer

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.

Urva · Answer

Thank you!! Will try it out

Menu

Project and Portfolio Management Discussions

Verified Answers

Theme customization in 24.1

Tags:

Top Replies

Resources