Question
AASEYA IT SERVICE PVT. LTD.
SA
Last activity: 22 Aug 2019 6:59 EDT
Modal Dialog Background Color Needs to Change
By default in Pega when we launch any modal dialog, the background automatically comes as blur or light grey colored. But my requirement is to make that blur color as light green color. Can anyone suggest me any solution to change the color of the modal dialog background ?
PFA
In attachment I marked the grey space. I want it as Light Green.
Thanks in advance.
Pegasystems Inc.
US
Can you create a custom CSS class with your required "background-color:" value (Light Green)?
In the section which is the content of the modal dialog, you can open Dynamic Layout properties configuration and add the custom CSS class under Presentation tab.
AASEYA IT SERVICE PVT. LTD.
SA
Yes I can create the custom css class but the problem is its changing the background color inside the modal but I want to change backside of the Modal as per my attachment.
Pegasystems Inc.
IN
Hi @ArpanR5311,
Please add the below code in userworkform/skin styles.
<style>
#modalOverlay .modal-content .customExpandInnerDivStyle{
background-color:green !important;
}
</style>
It is working for me.
AASEYA IT SERVICE PVT. LTD.
SA
Hi Rachit,
As per your suggestion I used your code in the User Workform and I am getting result like the below attachment. Its not changing the modal background, instead its changing the color inside the modal. In the below attachment I marked as cross marks there I don't want the color, I want the color to be change where I marked as Green tick. Please have a look.
Thanks,
Arpan
Pegasystems Inc.
IN
Use the below code then:
.modal-align-cell{
background-color:green;
}
Pegasystems Inc.
IN
Found even a better way of doing the same.
The grey color you are seeing is actually an image "pymodal_mask_img", so you can change it as per your requirement. That I think will be a better option - update this binary file by uploading an image what you want to show.
Accepted Solution
AASEYA IT SERVICE PVT. LTD.
SA
Hi,
I have got the solution.
We just need to add the below css style in our application additional style sheet in skin.
.modal-overlay
{
background: #7bea7b91;
}
It will override all the modal dialog background all over the app as per my req. If not need to change everywhere we need to change the modal overlay format.
Thanks everyone for your sharp reply.
Thanks,
Arpan