Experience Cloud Membership Components Styling

The article is provided as a guide.  Please note any further questions/assistance or details will require Premium Support to be purchased.

Payments2Us Profile Details Styling

  • For styling in header text or other styling in overall structure use “P2UsProfileUpdateCard” CSS class.
  • For styling of input fields use “P2UsProfileUpdateInput” CSS class.
  • For styling of buttons use “P2UsProfileUpdateButton” CSS class.

Payments2Us Subscription Details Styling

  • For styling in header text or other styling in overall structure use “P2UsSubsUpdateCard” CSS class.
  • For styling of input fields use “P2UsSubsUpdateInput” CSS class.
  • For styling of toggle use “P2UsSubsUpdateToggle” CSS class.
  • For styling of button use “P2UsSubsUpdateButton” CSS class.
  • For overall styling of renew now and update card form (modal popup) use “P2UsSubsUpdateModal” CSS class.
  • For specific styling of modal popup header use “P2UsSubsUpdateModalHeader” CSS class.
  • For specific styling of modal popup close icon use “P2UsSubsUpdateModalClose” CSS class.
  • For specific styling of modal popup body use “P2UsSubsUpdateModalBody” CSS class.

Payments2Us Subscription Alert Styling

  • For styling in overall structure use “P2UsAlertStyling” CSS class.
  • For styling of alert icon use “icon-red” CSS class.
  • For styling of “Alert” keyword use “P2UsAlertText” CSS class.
  • For styling of remaining alert message use “P2UsAlertMessage” CSS class.
  • For overall styling of renew now and update card form (modal popup) use “P2UsSubsUpdateModal” CSS class.
  • For specific styling of modal popup header use “P2UsSubsUpdateModalHeader” CSS class.
  • For specific styling of modal popup close icon use “P2UsSubsUpdateModalClose” CSS class.
  • For specific styling of modal popup body use “P2UsSubsUpdateModalBody” CSS class.

Example Styling added to Head Markup 

<style>
    
    .P2UsProfileUpdateCard .slds-card, .P2UsSubsUpdateCard .slds-card {
        border-style: none;
        box-shadow: 0px 0px !important; 
    }
    
    .P2UsProfileUpdateCard div.slds-card__body, .P2UsSubsUpdateCard div.slds-card__body {
        background-color: #F5F5F5;
        padding: 12px;
        border-radius: 6px;
    }
    
    .P2UsProfileUpdateCard div.slds-card__body * {
        background-color: #F5F5F5;
    }
    
    .P2UsProfileUpdateCard div.slds-card__body input {
        background-color: white;
        border: none !important;
    }
    
    
 
    
    
    
    .P2UsSubsUpdateCard .slds-checkbox_faux_container {
        display: flex;
        flex-direction: row
    }
    
    .P2UsSubsUpdateCard .slds-checkbox_on, .P2UsSubsUpdateCard .slds-checkbox_off {
        font-size: medium;
        margin-left: 6px;
    }
    
    .P2UsProfileUpdateCard .slds-button_neutral, .P2UsSubsUpdateCard .slds-button_neutral {
        border-color: #BC2028;
        background-color: white !important;
    }
    
    .P2UsProfileUpdateCard .slds-button_brand, .P2UsSubsUpdateCard .slds-button_brand {
        border-color: #BC2028;
        background-color: #BC2028 !important;
    }
    
    
    
    
    
    .P2UsAlertStyling {
        background-color: #F5F5F5 !important;
        box-shadow: 0px 3px 8.5px -4px rgba(66,66,66,0.4);
    }
    
    .P2UsAlertStyling h3 {
        color: #BC2028 !important;
    }
    
    .P2UsAlertStyling p {
        margin-right: 6px;
        color: black !important;
    }
    
    .P2UsAlertStyling .icon-red {
        --slds-c-icon-color-foreground-default: #BC2028 !important;
    }
    
    .logo {
        width: 145px;
        margin-top: 24px !important;
    }
    
    .log-out-btn {
        color: white !important;
        text-align: center;
    }
  
</style>
Click to copy