[SalesForce] customizing header in Communities (Winter 18)

Prior to winter 18, we were able to customize the display of the pageHeader image by referencing the class .no-assigned-image in our markup. We used this to create a custom theme and provide our customers with the ability to control things from a single location.

Today, I deployed into a new sandbox. What I now see is that there is no header image in our custom theme. If I switch the theme back to Napili, the header shows up.

Investigating it a bit more, what I am seeing is that the markup for the header in Winter 18 Napili has changed significantly and the CSS we used to rely on doesn't appear relevant anymore.

It looks like now, the background image is driven through .siteforceServiceBody .cHeaderPanel That cHeaderPanel makes me think they moved some of this stuff into a lightning component that gets the background image somehow. I also noticed the CSS is originating from <style></style> tags instead of from app.css, now. I'm not sure if that is new, or reflective of some architectural change in direction, but I don't see it in the previous template.

Can anyone point me in a good direction for troubleshooting this? My hope was that perhaps the pageHeader existed as a token now, but I don't see any evidence supporting that. I'd really like to be able to continue to leverage the existing image upload functionality that the branding editor provides, but we need to be able to have control over the header.

Best Answer

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)

Related Topic