Salesforce Experience Cloud - Financial Services Client Portal Tweaks

sfdc-dxp-clientPortalTweaks.css

/* ========= Frank's Front-End Fun Fridays =============
/* =============== Nov 20, 2020 Edition ================
/*
    This snippet of CSS can be added to a Salesforce Experience theme to 
    override and alter the Client Portal template for Financial Services. Keep in mind 
    that this CSS may not work indefinitely if specific class names in the core product 
    are changed in the future.
    
    Be sure to use the out-of-the-box config tools that make Experience Cloud so great 
    whenever you can! 
    
    If you have any feature requests or ideas to make this better, hit me up
    at fcaron@salesforce.com!
    
    Cheers!
*/

/* This adds a border to the non-Launcher tiles that are part of the template */
.cCommunity_Lending_Action {
    border-top: 10px solid #ffb611 !important;
}


/* This makes the font of the buttons on the non-Launcher tiles bold. */
.cCommunity_Lending_Action button {
    font-weight: bolder;
}


/* This adds the border to the Launcher tile. It's an unfortunate hack because the
Mortgage Launcher component doesn't have a meaningful selector for us to work with. 
Product dev teams make me sad panda sometimes. This may not work for your org because 
of the brittleness of the selector. This is generally a bad practice, so reach out 
if you need help for your org, and I'll show you how to find your unique data ID. */

[data-item-id="e13552ce-523a-480e-80dd-c766a41b1014"] {
    border-top: 10px solid #ffb611 !important;
} 

/* This changes the stock button for the launcher, which for some reason is different than
the buttons for the tiles. It's an unfortunate hack because the Mortgage Launcher component 
doesn't have a meaningful selector for us to work with. Product dev teams make me sad panda sometimes. */

[data-item-id="e13552ce-523a-480e-80dd-c766a41b1014"] button {
    padding-left: var(--sds-c-button-brand-spacing-inline-start, var(--lwc-spacingMedium,1rem));
    padding-right: var(--sds-c-button-brand-spacing-inline-end, var(--lwc-spacingMedium,1rem));
    text-align: center;
    vertical-align: middle;
    justify-content: center;
    transition: border .15s linear;
    background-color: var(--sds-c-button-brand-color-background, var(--lwc-brandAccessible,rgb(142, 204, 30)));
    border-color: var(--sds-c-button-brand-color-border, var(--lwc-brandAccessible,rgb(142, 204, 30)));
    color: var(--sds-c-button-brand-text-color, var(--lwc-colorTextBrandPrimary,#FFFFFF));
    margin-top: 32px;
    margin-bottom: 32px;
    font-weight: bolder;
}