Use the Dynamic Banner Background enhancement to customize the banners that display behind the titles of locations in your digital workplace. When you set a banner for a top-level location, such as a page, space, or channel, all nested locations will display the same banner automatically. This allows each space or section of a site to have a distinct look and feel.
You must be an administrator of your digital workplace or be in a group with the Manage Theme role to modify the parameters of this enhancement. However, you only require at least Write access to the banners folder to add new banners.
Sections in this article:
Request enhancement
To request this enhancement, please complete and submit an Enhancement Request Form.
Considerations and Caveats
- If the URL of a location that you are applying a banner to changes, you must re-upload a new banner image with a name that matches the location's new URL.
- If the URLs of multiple locations have the same ending, they all use the same banner image. For example, if there are two spaces with a channel called 'folder,' they will both use an image called 'folder' as their banner image, even if the parent spaces have different banners set.
Using this enhancement
To add a banner to a location:
- Find the URL of the location to which you want to add a banner. Locations nested under this one will also use the assigned banner.
- On your device, rename the file name of the banner image to that of the last segment of the location's URL. For example, if your location's URL was
/theme/images/banners/knowledge_base, the file name of the banner would beknowledge base. - Upload your banner image to the banner folder. The default folder is
/theme/images/banners, but your workplace may be configured to use a different location. If you are unsure what folder has been configured as the banner folder:- While in your digital workplace, press Ctrl+U(Chrome/Edge/Firefox) or Command+Option+U(Safari) to view the page source.
- Presse Ctrl+F(Chrome/Edge/Firefox) or Command+F(Safari) and search for
imageFolderPath. - Record the URL next to this value. This is the location of your banner folder.
Your banner should now be displayed on the matching location and the locations under it.
Be aware that you can assign nested locations a banner to override any banner inherited from a parent location. For example, if the Knowledge Base used in the above instructions contained a Questions forum (/theme/images/banners/questions), you could create a banner for that specific forum by uploading an image with the file name questions to your banner folder.
Customizing this enhancement
Once the enhancement has been enabled, the following code will appear in the header of your digital workplace:
<script>
setDynamicHeaderBackground({
imageFolderPath: "/theme/images/banners",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundGradient: "linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 20%, rgba(255,255,255,0) 100%)",
fallbackImageName: "default",
});
</script>
You can modify the following parameters of the code block to customize some aspects of how banners function and appear.
| Parameter | Description |
|---|---|
| imageFolderPath |
The file path to the folder where your banner images are uploaded. This can be any folder channel in your digital workplace that all members have read access to. If this value is blank, the default value is |
|
backgroundRepeat |
This sets the repeat of the banner background image using the When giving a value to this parameter, ensure it is wrapped in quotation marks. For example, If the value is left blank, the enhancement will use the default value |
|
backgroundSize |
This sets the size of the banner background image using the When giving a value to this parameter, ensure it is wrapped in quotation marks. For example, If the value is left blank, the enhancement will use the default value |
|
backgroundGradient |
This sets the gradient overlay over the banner background image so there is sufficient contrast between the image and the banner text. See the gradient styling section for details on how to customize this. The enhancement will not apply a gradient if the value is left blank or the property is removed. |
|
fallbackImageName
|
This sets the image that will be used if a banner image is not found for a particular page. The image should be in the banner folder, and the value you enter in this field should be the last segment of the image's URL. For example, if your default image's URL were The enhancement will not use a fallback image if the value is left blank or the property is removed. If no fallback image is used in a location, the default banner set for the digital workplace will also not have a gradient applied. |
Gradient styling
The gradient applied to the banner (backgroundGradient) can be adjusted depending on the theme of the digital workplace. See the MDN documentation on CSS gradients for details on creating a custom gradient.
Here are two example gradient options that work well for either light or dark text:
Dark header text
If the header text is dark, a light gradient should be applied to make the text readable while the banner image is still visible:
"linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 20%, rgba(255,255,255,0) 100%)"
If the banner titles are long, the 20% value can be changed 33% to extend the gradient to cover more of the image. Depending on the site design, this value can also be lower or higher.
Light Header Text
If the header text is dark, a light gradient should be applied to make the text readable while the banner image is still visible:
"linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 5%, rgba(255,255,255,0) 100%)"
If the banner titles are long, the 5% value can be changed 20% to extend the gradient to cover more of the image. Depending on the site design, this value can also be lower or higher.
Additional Resources