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.

  • Just to let you know there is currently a known issue about background color / image being overridden in Community in Winter '18: success.salesforce.com/… Commented Sep 20, 2017 at 21:33
  • That was the first thing I tried. Unfortunately, this isn't the problem in my case. Commented Sep 21, 2017 at 3:37

2 Answers 2


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='' />

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)

  • Thanks, David. This worked and our front end guy confirmed it. I'll have to keep a closer eye on the Partner Community chatter group. Commented Sep 26, 2017 at 17:14
  • 1
    Absolutely. I realize that these are not ideal changes to spend your time on so we are working to address many of these in the near future. Thanks (as always) for being part of our Ohana.
    – D Green
    Commented Sep 26, 2017 at 20:50

There is no Styling guide for customizing lightning communities, and Salesforce recommends using CSS sparingly and only when necessary, since all future releases of template components might not support all CSS customizations you do. In summer 17, the header was scoped under cHeaderPanel,

I have found that the main classes for identifying the different component sections of the napili template layout have a certain syntax cNameSection

For Example:

  • cHeaderPanel
  • cHeaderLine
  • cBrandingProfile
  • cSearchPublisher (Search and Post publisher Searchbox)
  • cNotifications
  • cProfileCon
  • cNavBarCon
  • cCenterPanel
  • cFooterPanel

Using Templates to Build Communities Summer 17

If you have customizations that depend on CSS, I would strongly recommend you create a custom theme layout with your own CSS classes where you will be able to have control over them.

  • I got some custom CSS(for cHeaderPanel, cCenterPanel and few others) in my Summer'17 Napili's template, which are almost(completely) obsolete in Winter'18 Napili. I know this sucks, but I have to see if I can get some work-around. You know what, standard Save button functionality is not working to save a record. Huge blow to my community.
    – SatyaV
    Commented Sep 20, 2017 at 21:33
  • yeah, that's why you would want to create your custom Theme, to avoid running into these issues
    – glls
    Commented Sep 20, 2017 at 21:34
  • Here is the issue I am facing in WI'18 Napili's community: Salesforce Known Issue
    – SatyaV
    Commented Sep 20, 2017 at 21:35
  • Creating custom theme? How would I do that? My understanding is: Create a community using Standard template(whatever we choose when creating) and make our custom components.
    – SatyaV
    Commented Sep 20, 2017 at 21:37
  • i linked the doc for reference purposes
    – glls
    Commented Sep 20, 2017 at 21:38

You must log in to answer this question.

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