Customizing the branding of the web browser

Prerequisites

Required roles

You must have the IAM Platform role of Administrator to customize the web browser.

Elements you can customize

Product name

The custom name is used throughout the web browser when running Cloud Pak for Data as a Service. For example, the custom name is used on the home page and on the banner of every page in the Cloud Pak for Data as a Service web interface.

Home page logo

If you upload a logo, the logo is displayed in the welcome section of the home page.

Browser icon

If you upload an icon, the icon is displayed in the web browser tabs.

Home page image

If you upload a home page image, the image is displayed on the background of the home page.

Procedure

1. Create a publicly accessible Cloud Object Storage bucket and upload static images.

2. Create a publicly accessible URL for the images.

3. Select Administration > Configurations and settings > Branding customization.

4. To use a custom name, select Product name > Custom name and enter the name that you want to use in the browser. The requirements for the custom product name are:

   • Must be 40 characters or less.
   • Cannot include the following characters: <, >, /, or .

5. To use a custom home page logo, select Home page logo > Use a custom logo and enter a publicly accessible URL to a graphic file to upload as the home page logo. The requirements for the home page logo are:

   • Must be a JPG, PNG or SVG file.
   • Must be 512 x 512 pixels.
   • Must be 500 KB or less.
   • File should be hosted in or on a CDN with a publicly accessible URL.

6. To use a custom browser icon, select Browser icon > Use a custom icon and enter a publicly accessible URL to a graphic file to upload as the icon in browser tabs. The requirements for the browser icon are:

   • Must be a JPG, PNG or SVG file.
   • Must be 512 x 512 pixels.
   • Must be 500 KB or less.
   • File should be hosted in object storage or on a CDN with a publicly accessible URL.

7. To use a custom image on the home page, select Home page image > Use a custom image and enter a publicly accessible URL to a graphic file to upload as the background image on the homepage. The requirements for the home page image are:

   • Must be a JPG, PNG or SVG file.
   • Images with a transparent background produce a better result.
   • Images less than 500 KB load more quickly.
   • File should be hosted in object storage or on a CDN with a publicly accessible URL.

Storing static images on Cloud Object Storage

To display custom images to brand your Cloud Pak for Data as a Service user interface, you must store the images in IBM Cloud Object Storage or on a content delivery network (CDN). Then you must supply a publicly accessible URL for the image file. The file is loaded when the browser loads Cloud Pak for Data as a Service.

The steps for storing images on IBM Cloud Object Storage are similar to the steps for IBM Cloud docs: Building a Static Website.

1. Create a publicly accessible bucket. See Create a bucket configured for public access in IBM Cloud docs: Building a Static Website.
2. Enable public access for the bucket. See Setting public access in IBM Cloud docs: Building a Static Website.
3. Upload your image files to the bucket. See Upload content to your bucket in IBM Cloud docs: Building a Static Website.

Create a publicly accessible URL

Create a publicly accessible URL for the image with the following structure:

https://{Cloud Object Storage access domain}/{bucket name}/{file name}

• The {Cloud Object Storage access domain} matches the region selected as the location when the bucket is created. For Cloud Pak for Data as a Service, the regions are: us-south (Dallas), eu-gb (London), eu-de (Frankfurt), or jp-tok (Tokyo). For more information about the regional endpoints for Cloud Object Storage see IBM Cloud docs: Regional Endpoints.
• For {bucket name}, enter the bucket name that you defined during the initial setup of the publicly accessible Cloud Object Storage bucket.
• For {file name}, enter the file name of the file that you uploaded into the bucket and want to display publicly for customization.

In the following example, the bucket name is mybucket and the file that was uploaded is named logo.jpg. The bucket was created in the us-south region and was set up with public access. The resulting URL for accessing the image is:

https://s3.us-south.cloud-object-storage.appdomain.cloud/mybucket/logo.jpg

Restore defaults

You can remove the branding customizations and return the web browser to the default appearance at any time.

To restore defaults, click Restore defaults > Apply.

Learn more

• IBM Cloud docs: Getting started with IBM Cloud Object Storage
• IBM Cloud docs: Building a Static Website

Parent topic: Managing Cloud Pak for Data as a Service