Is it possible to change the ServicePoint homepage background

book

Article ID: 199460

calendar_today

Updated On:

Products

CA Service Management - Service Desk Manager CA Service Desk Manager

Issue/Introduction

How to update the background of the ServicePoint homepage? Out of the box, the background of the ServicePoint homepage is a white color.

Environment

Service Management 17.3

ServicePoint module

All Supported Windows Operating Systems

Resolution

1.  Copy the image you would like to have as a background in ServicePoint to the xFlow\APPS\Services\incidentmicroservice-17.0.479\public directory on the xFlow server

2.  Create a file called "custom.css" in the xFlow\APPS\Services\incidentmicroservice-17.0.479\public directory on the xFlow server with the following content

a.  This change will have the background image in all the frames of the ServicePoint page (i.e. the entire page)

.page-basic {
    background: #FFFFFF !important;
    background-image: url('NAME_OF_IMAGE.jpg') !important;
}

b.  This change will have the background image in all the Featured Offering/Search Bar frame only

.page-basic {
    background: #717D7E !important;
    
}
.col-sm-10 {
    background-image: url('NAME_OF_IMAGE.jpg') !important;
}

c.  This change will have the background image on the Search Bar where it says: “Type here to describe your issue”?

.page-basic {
    background: #FFFFFF !important;
    
}
.smartsearch-wrap {
    background-image: url('NAME_OF_IMAGE.jpg') !important;
}

3.  Modify the xFlow\APPS\Services\incidentmicroservice-17.0.479\public\CASM.HTML file with a text editor

Look for the line:

<link rel="stylesheet" href="styles.78d0f5d5315d3f578e1b.css"></head>

Modify the line so it reads as:

<link rel="stylesheet" href="custom.css"></head> 

4.  Recycle xFlow service and clear web browser cache

Additional Information

NOTE: Customizations are outside the scope of Broadcom Support.  The information provided in this KB article is solely for guidance.

Please be sure to back up any files that are modified by making a copy of the file in a separate folder from the xFlow install directory.  We do not recommend doing an in-place copy/paste of the file as a backup as the given copied file may disrupt product operation.

A way to locate a given form element to modify in the css file is to use Chrome's Browser Console.  For instance, drilling down through the Elements tab of the Browser console while viewing Service Point, we find the Search Bar element where it says: “Type here to describe your issue” here:

This is how we devise the code:

}
.smartsearch-wrap {
    background-image: url('NAME_OF_IMAGE.jpg') !important;
}

Attachments