Update the Logo in Clarity PPM

Document ID : KB000042930
Last Modified Date : 29/05/2018
Show Technical Document Details
Introduction:
The PPM UI can be configured to use custom logos using Studio UI Themes.
Instructions:
1.Login to PPM
2.Hover the mouse on the Administration Tab and click on UI Themes
3.Click on the Default under UI Themes Menu and copy the CSS content
4.Return to the UI Themes Menu and click on New
5.Enter the Name of the New Theme and the ID
6.Under CSS Section, paste the copied CSS Content from the Default
7.Using any 3rd party open source Image conversion to base64, get the logo that you want to update.
8.Now copy the CSS content from the Image Conversion tool and paste it in the new theme created in PPM under the CSS section that you would like to modify. 

For example: 

To modify the logo on the login page, the base64 encoded string would be pasted under the following section: 
 
/* CA PPM Logo */
#ppm_login_logo {
  background: url(data:image/filetype;base64, my_image_base64_string);  margin: 6px 0px 0px 15px;
  width: 150px;
  height: 50px;
}

To modify the logo on the top left hand corner of the page header, paste the base64 encoded string under the following section: 


/* The logo in the upper left hand corner of the page header */
#ppm_header_logo {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAqCAYAAADxughHAAAKMElEQVRo3s1Z93eT5xX+
    AFvykoe85C3b2tuSLMmSB95gbMwIJcwwbGagISRAFg0JK6xAmGGUk7TNaU8TaEvapOn4157eez/
    ...
    3QxXFJCmwgpmVNd0BSMAc3z2HD1EQCydTsFoC19qcQPq+Wi9Ks4LzvZQtY52Fz7+QFmW+DxMx2vJe43816f1xNGKfhAAAAABJRU5ErkJggg==);  margin: 6px 0px 0px 15px;
  width: 50px;
  height: 42px;
}


9.Click on Save
10.Now the Logo has been updated to the desired choice

Note: The same steps apply to both On Premise and SaaS environments. 
Additional Information:
Additional details on how to modify the PPM logos, as well as additional modifications to the UI theme can be found in the CA PPM Studio UI Themes section in the documentation.