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:
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.
Set up the enhancement
To enable the enhancement for the first time, follow the steps below. To request this enhancement to be enabled on your site by our Professional Services team, complete and submit an Enhancement Request Form.
Upload banner images
- Find the URL of the location where you want to add a banner. Locations nested under this location will also use the assigned banner.
- Before uploading the image, change the file name of the banner image on your device to that of the last segment of the location's URL. For example, if your location's URL was
/resources/knowledge_base, the file name of the banner would beknowledge_base. -
Upload your banner image to the banner folder. If you are setting up these banners for the first time, the default folder is
/theme/images/banners. Before publishing the file, ensure the file name matches the URL location exactly without a file extension. If necessary, edit the file name and then publish the image.
Repeat the above steps for all pages where you want a custom banner to display. Finally, upload an image titled "default" to the banner folder. This image will be used for pages with no specific banner specified.
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 page used in the above instructions contained a Questions forum (/resources/knowledge_base/questions), you can create a banner for that specific forum by uploading an image with the file name questions to your banner folder.
Add enhancement code to the site header
Warning:
Adding code that contains errors can disrupt the functionality of your digital workplace. Please use caution when adding code to this area.
Add the following code to the header of your digital workplace:
<!-- Dynamic banner backgrounds begins -->
<link rel="stylesheet" type="text/css" href="https://enhancementsprod.blob.core.windows.net/enhancements/dynamic-banner-background/css/setDynamicHeaderBackground.css" /> <script type="text/javascript" src="https://enhancementsprod.blob.core.windows.net/enhancements/dynamic-banner-background/js/setDynamicHeaderBackground.js"></script> <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>
<!-- Dynamic banner background ends -->
Your banner should now be displayed on the matching location and the locations under it.
Customize this enhancement
Update banner images
To update the banner on a page, you can repeat the steps to upload banner images above for any new banners, or a new version of any existing files.
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.
- Press 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.
Customize the banner settings
Once the enhancement has been enabled, the following code will be 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 the banners' functionality and appearance.
| 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.