[SalesForce] Accessing Header Image and Other Values From Custom ThemeLayout

I'm creating a custom Theme Layout for Communities. I've created a Lightning Component and I would like to use the customization options available in Community Builder and reference them from within my template (See image below). Specifically, I would like to access the "Header Image" value, but the other properties would be nice to know as well.

Do I access these in the component like so? (And what are the property names?)

<aura:component implements="forceCommunity:themeLayout" access="global" description="My Theme Layout">
    ...
    <img src="{!v.nameForHeaderImageProperty}">
    ...
<aura:component>

Or are they accessible as design tokens in the CSS? (And what are the property names?)

.header {
    background-image: t(nameForHeaderImageProperty);
}

I've scoured the SFDC dev site as well as the '16 and '17 release notes, but can't seem to find this answer.

Best Answer

I'm posting this answer as a partial answer/work-around to hopefully help others, until a better answer is provided.

Primary Font

Accessing the chosen "Primary Font" from Community Builder can be accomplished by using the design token in the CSS file:

.THIS .myThemeSection {
     font-family: t(fontFamily);
}

Company Logo and Header Image

(Requires Site.com Studio)

To force your ThemeLayout to use "Company Logo" and "Header Images" uploaded through the UI, it appears that you must use Site.com Studio. You will need to hard-code the path to a generic image name within your Component markup or CSS files:

Component CSS Version

.THIS .myHeaderClass {
     background-image: url(http://[communityurl]/myThemesHeaderimage.jpg);
}

Component Markup Version

<img src="http://[communityurl]/myThemesHeaderimage.jpg">

Then, when uploading an image file through Site.com Studio, make sure that whomever uploads the file follows your file naming convention and names/renames their file 'myThemesHeaderimage.jpg'. This is less than ideal and looks to have a downsides.

It requires the use of Site.com Studio.
It appears to cause some caching issues when the image is changed multiple times, but this can be fixed with a hard reload in the Web browser.
It forces the user uploading the image to use the prescribed naming convention.
Hard-coding. Blech!

Header Fonts

I have yet to find an answer/workaround for this, but I'll update if I do.

Related Solutions

[SalesForce] customizing header in Communities (Winter 18)

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)

[SalesForce] How to define which Navigation to use for a custom Navigation Menu component

Disclaimer: This solution covers undocumented properties of a standard lightning component so there is inherent risk that Salesforce might change the name of these properties in the future without notice. Please use this solution at your own discretion. https://developer.salesforce.com/docs/component-library/bundle/forceCommunity:navigationMenuBase/documentation

Solution - navigationLinkSetId attribute

You may specify the Navigation Link Set Id or developer name of the desired navigation menu in an attribute named "navigationLinkSetId" in a Lightning Component that extends forceCommunity:navigationMenuBase.

I would recommend using the developer name since the Id might change between environments. Both can be found using SOQL:

SELECT Id, DeveloperName, MasterLabel FROM NavigationLinkSet

Example:

Create a navigation menu titled "My Custom Navigation". The developer named will be "My_Custom_Navigation".

Update your component markup by including the new attribute:

<aura:component extends="forceCommunity:navigationMenuBase">
    <aura:attribute name="navigationLinkSetId" type="String" default="My_Custom_Navigation" />

    <div class="footer__navigation slds-m-vertical_medium">
        <aura:iteration items="{!v.menuItems}" var="item">
            <p>{!item.label}</p>
        </aura:iteration>
    </div>
</aura:component>

This will result in rendering the menu items defined in My Custom Navigation instead of Default Navigation.

Side note - Other undocumented attributes

There are a couple of other attributes that can be set in a similar fashion to configure your lightning component navigation menu further.

I have only listed the ones that I have confirmed working in api version 47.0.

addHomeMenuItem (Boolean)

A common use case would be to hide the Home menu item which cannot be achieved by using Community Builder since the option to remove it is disabled.

Set this attribute to false if you would like to hide the Home menu item.

menuItemTypesToSkip (String[])

An example use case would be to list internal and external links separately and/or together without creating multiple navigation menus.

Possible options to be delimited by a comma (,) are:

InternalLink
ExternalLink
GlobalAction
MenuLabel
NavigationalTopic
SalesforceObject