[SalesForce] Copy lightning experience background look and feel

I am developing a community and I would like it to look like lightning experience.

One main thing is the background picture that is dissolving into blue – I want to achieve a background like this:

enter image description here

So far I could get to this background:

enter image description here

with this code:

MARKUP:

<div class="allMainContainer">
    <div class="lex_background">
        This is my main component...
    </div>
</div>

CSS:

.THIS.allMainContainer {
    background-color: rgb(175, 197, 222);
    height: -webkit-fill-available;
}
.THIS .lex_background {
    background-image: url(/_slds/images/themes/oneSalesforce/banner-brand-default.png?cache=210.2);
    background-repeat: repeat-x;
    background-position: top left;
}

But as you can see – the background does not look nice

QUESTION:

How can I make my background to look exactly like Lightning experience?

Best Answer

In order to achieve the look you desire, you can use the built-in Brand Band component from the Lightning Design System by adding extends="force:slds" to your lightning app, which it appears you already have done, but there's a trick.

First off, you're going to want to add the 3 following classes to your wrapper (where you have placed the class allMainContainer): slds-brand-band, slds-brand-band_cover, & slds-brand-band_medium. This will give us the correct sizing and positioning for the Brand Band pseudo-elements.

Unfortunately, it seems that the SLDS import is completely unbranded (I tried to find documentation on changing that, unsuccessfully), which means we haven't yet accomplished anything noticeable with this import. Next, we'll want to add a few CSS declarations to get things to actually appear. These are all based on the actual declarations in the Lightning Experience for the Lightning Blue theme that you wanted to copy.

.THIS.slds-brand-band {
    background-color: rgba(176, 196, 223, 1.0); /* This is the standard blue */
    z-index: 1; /* This is to counteract the -1 that the :before element has */
}

/* These are the gradients and image used in the Salesforce theme */
.THIS.slds-brand-band:before {
    background-image: url(/_slds/images/themes/lightning_blue/lightning_blue_background.png),linear-gradient(to top, rgba(255, 255, 255, 0.0) 0, rgba(160, 180, 206, 1.0));
}
.THIS.slds-brand-band:after {
    background-image: linear-gradient(to bottom, rgba(176, 196, 223, 0.0) 60%, rgba(176, 196, 223, 1.0));
}
Related Topic