I've been testing the customization capabilities of communities with napili template. One of the very basic things I cannot easily do is, branding. I can update the logo, but not the background. It seems I need to override the CSS, found the below snippet that helps to change the background,

.default-bg-overlay { background: white none repeat scroll 0 0 !important; }

The above one change the header color, but not the body, I also cannot set the background image. What would be the right way to do it?


1 Answer 1


To update the background, in the branding editor, there should be an "edit" pencil or brush referring to "Edit CSS"

enter image description here

from there you can change the background with appropriate css styling.

for Ex.

background: red;

You should see your "body" change color.

Please refer to this documentation for further customizations.

UPDATE (Witner '18):

Lightning Communities now support changing the background color from the Branding Editor's properties:

enter image description here

  • The guide you linked to has now been retired - current one is at developer.salesforce.com/docs/… otherwise good answer.
    – Dave Humm
    May 9, 2017 at 10:26
  • Thanks @Dave Humm, I have updated the link in the answer.
    – glls
    May 9, 2017 at 13:19
  • @glls This workaround works just fine. BUT, whenever the community page loads for the first time, header background would come up with GRAY color and then applies/re-renders to the color we had in the Custom Css. This makes end users to see color switch and that doesn't seem good at all.
    – SatyaV
    Sep 25, 2017 at 18:31
  • This doesn't apply to the standard components background color that are placed in the community pages.
    – sfdcFanBoy
    Oct 6, 2021 at 6:13
  • not with LWC, in the past, with Aura, the css could be overriden, but because of Shadow DOM, this is no longer possible
    – glls
    Oct 6, 2021 at 11:43

You must log in to answer this question.

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