[SalesForce] Lightning OverlayLibrary Background Color for Header and Body

I just want to modify the background color of whole header section and body of my lightning overlayLibrary.

enter image description here

here is my code :

Popup Component

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" controller="PopupController">
<!--<aura:handler name="init" value="{!this}" action="{!c.initialize}" />-->
<lightning:overlayLibrary aura:id="overlayLib" />
<lightning:button name="modal" label="Show Modal" onclick=" 
{!c.handleShowModal}"/>

</aura:component>

PopupController

 ({
   handleShowModal : function(component) {

    console.log('DBG: inside handleShowModal');
    var modalBody;
    var modalHeader;
    $A.createComponents([
            ["c:ModalContent", {}],
            ["c:ModalHeader", {}]
        ],
        function(content, status) {
            console.log('DBG: content >>> ' + content);
            console.log('DBG: status >>> ' + status);
            if (status === "SUCCESS") {
                modalBody = content[0];
                modalHeader = content[1];
                component.find('overlayLib').showCustomModal({
                    header: modalHeader,
                    body: modalBody, 
                    showCloseButton: true,
                    cssClass: "mymodal",
                    closeCallback: function() {
                        alert('You closed the alert!');
                    }
                })
            }
        }
    );
}
})

ModelContent : 

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
<div>
    <p>
        You are now eligible for our exclusive <b>Melbourne International Flower and Garden Show offer!</b>
    </p>
</div>

ModalHeader : 

<aura:component >
<h1>CONGRATULATIONS!</h1>
</aura:component>

I appreciate your response!

Best Answer

You can do this by using custom CSS classes, some of which is already added in the the Line 21 of your PopupController

But, any custom CSS class you add must be accompanied by the cMyCmp class, where c is your namespace and MyCmp is the name of the component that creates the modal. Adding this class ensures that the custom styling is properly scoped.

For example, if the name of your component is PopupComponent or popupComponent, its CSS class would be cPopupComponent.

In the PopupController that you have shared in the question, Line 21, there is the property cssClass: "mymodal",. Please add your component class to this property, something like this cssClass: "cPopupComponent myModal",

And then the CSS for the background color(this goes in component style part of your PopupComponent, where there is the lightning:overlayLibrary):

/*Modal Header*/
.THIS.myModal .slds-modal__header{
 background: #e22319; 
} 

/*Modal Body*/
.THIS.myModal .slds-modal__content{
 background: #e6ee6e; 
}

And that's it!

enter image description here

I hope this helps! :)

Related Topic