How to Override community background image/color in the Napili template?

1.4K Asked by KondoNakamura in Salesforce , Asked on Aug 5, 2021

I've been testing the customization capabilities of communities with napili template. One thing i found, I can update the logo, but not the community 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 set community background?

Answered by Nitin Solanki

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

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

for Ex.

body { 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:

How to Override community background image/color in the Napili template?

Your Answer