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>