2

I want my lightning quick action background to be orange not white. I've tried many suggestions but nothing seems to work. How do I change the entire modal quick action background color

enter image description here

Here is my component:

<aura:component implements="force:hasRecordId,force:lightningQuickActionWithoutHeader" controller="abPartnerBilling" access="global">
  <aura:attribute name="wrapperCSS" type="String"/>
  <aura:unescapedHtml value="{!v.wrapperCSS}"/>
  <aura:attribute name="bType" type="String" default="Standard"/>
  <aura:attribute name="pBilling" type="Partner_Billable__c"/>
  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

  <div class="abDiv">
    <lightning:notificationsLibrary aura:id="notifLib" />
      <div class="slds-border_bottom">
        <lightning:select name="bType" label="&nbsp;Billable Type" value="{!v.bType}" >
          <option value="Standard">Standard</option>
          <option value="Minimum">Minimum</option>
          <option value="Tiered">Tiered</option>
        </lightning:select>
        <br/>
      </div>
      <br/>
      <aura:if isTrue="{!v.bType=='Standard'}">
        Show input for a Standard billable item<br/>
      </aura:if>
      <aura:if isTrue="{!v.bType=='Minimum'}">
        Show input for a billable item with a minimum amount billed
      </aura:if>
      <aura:if isTrue="{!v.bType=='Tiered'}">
        Show input options for Tiered billing with possible minimum amount
      </aura:if>
      <br/>&nbsp;   
  </div>

  <div class="modal-footer slds-modal__footer">
    <lightning:button label="Submit" onclick="{!c.handleSubmit}"/>
    <lightning:button label="Cancel" onclick="{!c.handleCancel}"/>
  </div>
</aura:component>   

Here is the css:

.THIS {
    background-color: blue;
    height: 100%;
}

.THIS.abDiv {
    background-color: orange;
    border-radius: 5px 5px;
}

Here is the controller:

({
    doInit : function(component, event, helper) {
      console.log('Init Function Called!');
     
      var rid = component.get('v.recordId');
      component.set("v.wrapperCSS", "<style>.cuf-scroller-outside { background-color: blue !important;</style>");
      console.log('Record ID: ' + rid);
      
      var action = component.get('c.createNewPB');
      action.setCallback(this, function(response) {
          var pb = response.getReturnValue();
          pb.Partner_Agreement__c = rid;
          component.set('v.pBilling',pb);
          console.log('Agreement ID: ' + pb.Partner_Agreement__c);
      })
      $A.enqueueAction(action);

    },
    handleError : function(component, event, helper) {
        component.find('notifLib'.showToast({
            "title":"Error!",
            "message":event.getParam("message"),
            "variant":"error"
        }))
        console.log('Handle Error: ' + event.getParam("message"));
    },
    handleCancel : function(component, event, helper) {
        console.log('Cancel button clicked!');
        $A.get("e.force:closeQuickAction").fire();
    },
    handleSubmit : function(component, event, helper) {
        console.log('Submit button clicked!');
        $A.get("e.force:closeQuickAction").fire();
    }
})

2 Answers 2

1

You have to change the approach. It is hard to add css to the standard modal opened from quick action.

1

I discovered I can do it before the first defined div by using this tag. I can also control the default width of the popped up modal from the lightning quick action as follows

<aura:html tag="style">
   .slds-modal__container {
       width: 80%;
       max-width: 90% !important;
    }
    
    .slds-modal__content {
       background-color: lightgray !important;
    }
</aura:html>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .