CSS Ninjas,
I need some help regarding CSS with Communities. It appears that the default Napili template adds a gray background overlay on images such as the Banner image and the Featured Topic pictures that looks like this:
Is this possible to remove with the custom CSS branding editor in the Builder? I did some research and tried to use this code with no luck:
.class {
background-color: transparent;
}
What am I doing incorrect here?
To update the 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:
Re: ability to reference the Header Background image in the Customer Service (Napili) template
If you need to reference the Header Background Image using the Customer Service (Napili) template the cleanest way to reference it is through this approach:
1) Create a defaultTokens bundle (or update your existing one) to include:
<aura:tokens extends="force:base">
<aura:token name="headerImageUrl" value='' />
</aura:tokens>
2) Target the following CSS Selector:
.headerImage {
background-image: t('url(' + headerImageUrl + ')');
}
Please note that this is not a 'supported' selector/token today so there is the potential that it could change in the future (although we will do our best to communicate any changes/updates in the Customer Success and Partner Community chatter groups)
For anyone looking to reference the Branding Logo Image we are introducing a supported design token: brandLogoImage
Re: not being able to Save changes to a record This is a known issue and is being fixed ASAP before Winter '18 rolls out to Production. Apologies for the issues that this has caused in Sandbox/DE Orgs.
Cheers - D Green (Community Cloud PM)
Best Answer
refer the appropriate class under the template Branding