Adding custom banner images

Using CSS, you can add banners to locations in your digital workplace. These banners display a custom image in the region behind a page's title. You can use these to better differentiate locations in your digital workplace.

A customer banner that appears on all locations in a digital workplace.

Go to one of the following sections in this article:

Considerations and caveats

  • Existing banners: If your digital workplace is already using images in banners, refer to your digital workplace's Styles page for instructions on how to modify or update them.

Preparing your image

Make sure your image has the following properties:

  • Size: 2600x134 (for default themes). If your digital workplace theme modifies the size of the banner region your height may be different; use your browser's inspect element tool to find out the height available to the #content-head element.
  • File type: PNG
  • Contrast: Ensure that your image contrasts with the text displayed over it.
  • Composition: Keep your images simple. If you want to include more complex elements in your banner, make sure they appear in the right portion of the image. This reduces the likelihood of the image making the title and breadcrumbs challenging to read.

Uploading your image

While you don't have to host the banner's image file in your digital workplace, it is easier for others to access. You require at least Write level access to the folder you are uploading to do this.

  1. In your digital workplace, go to the folder channel or folder where you want to upload the image. A themes folder is a good location for this image.
  2. Select Add Files.
  3. Drag your image file into the designated area, or select Select files from your computer to find the file on your device.
  4. Once the file upload reaches 100%, select Publish All.
  5. While viewing the preview of the image, select Actions followed by Access.
  6. On the image's Access page, ensure that the All Members group has at least Read level access to the image. If you need to add this rule:
    1. Select Create A Rule.
    2. Select All Members.
    3. Select Read.
    4. Select Create Rule.
  7. Select Save.
  8. While viewing the preview of the image, right-click Download and select Copy Link (or your browser's equivalent).
  9. Paste this copied link to a safe location. You will need it when setting up the banner.

Adding a banner to a specific location

You can add banners to specific locations via the Advanced page of that location. Banners you add this way will only appear on that location. They will not appear on nested locations, Actions menu pages, Add article pages, Add event pages, and Add forum topic pages associated with this location.

These steps require you to access the Advanced page of a location. For information about who can access this, see Advanced page.

  1. Go to where you want to add a banner.
  2. Select Actions followed by Advanced.
  3. In Javascript Code, enter:

    <style type='text/css'>
#content-head{
    background-image: url('{image URL}');
    background-repeat: no-repeat;
    background-size: cover;      
}
</style>
  4. In the CSS that you just added, replace {image URL} with the URL of your banner image. For example:

    <style type='text/css'>
#content-head{
    background-image: url('https://dwp.insidetheigloo.com/download/themes/hr_bannerpng;v1?attachment=1');
    background-repeat: no-repeat;
    background-size: cover;      
}
</style>
  5. Select Save.

Adding a banner to all locations

Using the Appearance page, you can add a banner that appears throughout your digital workplace. 

These steps require you to access the Appearance page. For information about who can access this, see Appearance page.

  1. Select  Control Panel.
  2. Under Presentation, select Appearance.
  3. In the Theme section:
    • If your digital workplace uses a theme from the Theme Library, select Add custom CSS if it is not already selected.
    • If your digital workplace uses a custom theme, select Edit Custom Theme.
  4. In the provided text box, append the following CSS:

    #content-head{
    background-image: url('{image URL}');
    background-repeat: no-repeat;
    background-size: cover;      
}
  5. In the CSS that you just added, replace {location ID} with the ID you copied and replace {image URL} with the URL of your banner image. For example:

    #content-head{    
    background-image: url('https://dwp.insidetheigloo.com/download/themes/hr_bannerpng;v1?attachment=1');
    background-repeat: no-repeat;
    background-size: cover;      
}
  6. Select Apply or Publish.

Adding a banner to a space

You can add banners to specific spaces via the space's Layout page. Banners that you add this way will appear on most locations within the space, excluding Actions menu pages, Add article pages, Add event pages, and Add forum topic pages associated with locations in the space. 

These steps require you to access the Space Administration panel. You must be an administrator of the space or a workplace administrator to do this.

  1. Go to the space.
  2. Select  Administration.
  3. Under Presentation, select Layout.
  4. In the Header editor, select More Misc followed by Code View.
  5. Enter the following:

    <style type='text/css'>
#content-head{
    background-image: url('{image URL}');
    background-repeat: no-repeat;
    background-size: cover;      
}
</style>
  6. In the CSS that you just added, replace {image URL} with the URL of your banner image. For example:

    <style type='text/css'>
#content-head{
    background-image: url('https://dwp.insidetheigloo.com/download/themes/hr_bannerpng;v1?attachment=1');
    background-repeat: no-repeat;
    background-size: cover;      
}
</style>
  7. Select Save.

Adding a banner to a root location 

Using the Appearance page of a location that resides at the root of your digital workplace, you can add a banner that will appear on it and locations under it. Banners you add this way will not appear on  Add article pages, Add event pages, and Add forum topic pages.

These steps require you to access the Appearance page. For information about who can access this, see Appearance page.

Getting the page's ID

  1. Go to the location. This location must be at the root of your digital workplace.
  2. Open your browser's developer tools (F12 in most browsers).
  3. In the developer tools, switch to the Console tab.
  4. In the Console, enter document.body.id;.
  5. Copy the text between the quotes and paste it to a safe location. You will need it in the next step.

Adding the banner

  1. Select  Control Panel.
  2. Under Presentation, select Appearance.
  3. In the Theme section:
    • If your digital workplace uses a theme from the Theme Library, select Add custom CSS if it is not already selected.
    • If your digital workplace uses a custom theme, select Edit Custom Theme.
  4. In the provided text box, append the following CSS:

    #{location ID} #content-head{    
    background-image: url('{image URL}');
    background-repeat: no-repeat;
    background-size: cover;  
}
  5. In the CSS that you just added, replace {location ID} with the ID you copied and replace {image URL} with the URL of your banner image. For example:

    #ig-page-hr #content-head{    
    background-image: url('https://dwp.insidetheigloo.com/download/themes/hr_bannerpng;v1?attachment=1');
    background-repeat: no-repeat;
    background-size: cover; 
}
  6. Select Apply or Publish.