Rebranding or skinning the My Cloud Services console

You can modify the styles.css file to rebrand or reskin prominent portions of the My Cloud Services console, which is based on AngularJS. For example, you can add a company logo to the login page and/or the banner that appears at the top of the console after logging in.

You can also customize the following aspects of the console:

• Product suite name that appears on the login page
• Background image that appears on the login page
• Application name that appears in the banner.
• Background color and the text color for the form portion of the login page
• Background color and the text color for both the upper and the lower portions of the banner that appears at the top of the console after logging in
• Background color of primary buttons
• Background color of accordion panel headers
• Dialog box header and background colors
• Text color
• Product suite name or application name (cannot be localized)

• Customized static text messages on the login page for version 4.6 (can be localized)

The comments in the styles.css file show which sections you can modify and how they affect the My Cloud Services console. 

This topic contains the following information:

• • Before you begin
  • To rebrand or skin the My Cloud Services console
  • To rebrand or skin the My Cloud Services console based on tenants

Before you begin

 ErrorThe referenced document [confluencePage:page:clm47.Localizing the My Cloud Services console for version 4.6] was not found.

To rebrand or skin the My Cloud Services console

1. Copy the contents of the installationDirectory/Cloud_UI/custom_sample directory to the installationDirectory/Cloud_UI/custom directory on the My Cloud Services Console host.

   Warning

   Note

   If you installed clmui on Platform Manager, you might need to create the custom directory.  

   Success

   Tip

   Do not confuse the custom directory here with the custom directory in installationDirectory\tomcat\webapps\clmui.

2. If you want to add new images to the console, add those files to the installationDirectory/Cloud_UI/custom/skinning/img directory.

   Warning

   Note

   By default, the img directory contains four files used as background images for the Login page. These files are named login-cover-1.jpg, login-cover-2.jpg, login-cover-3.jpg, and login-cover-4.jpg.

   BMC Cloud Lifecycle Management displays one of these images at random. You can replace these images with images of the same names. For example, if you want only a single image to appear as the background for the login page, create four copies of that image and rename those copies to match the names of the four default image files.

   One of the background images for the Login page

   

3. Create a backup copy of the installationDirectory/Cloud_UI/custom/skinning/css/styles.css file. 
4. Open the installationDirectory/Cloud_UI/custom/skinning/css/styles.css file for editing.
   Each CSS rule includes a helpful comment that describes what the style applies to. 

5. Modify sections in the styles.css file according to how you want the My Cloud Services console to appear.
   For example, if you want to change the company logo on the login page, edit the following section:

   /* The company logo on the login page */
   .login-form__logo-bmc {
      width: 71px;
      height: 30px;
      margin-left: 0px;   /* This margin can be changed to
       center or right-align the logo */
      background-image: url('../img/bmc-logo.png');
      background-repeat: no-repeat;

   For this example, you would also need to add the your-company-logo.png file to the img directory.

6. When you are done making changes, save and close the styles.css file.
   In the following screenshot,  the accordion header background color, the accordion body background color, and the accordion header font color have been changed.

   Warning

   Note

   If clmui is properly configured, your changes should appear immediately.  

   

7. If the default custom location was not configured, restart the following services after you make the appropriate changes:
   • If you modified the config.properties file on Tomcat, restart Tomcat. 
   • If you modified the cloudservices.json configuration file (because clmui is installed on the Platform Manager host), restart the Platform Manager host. 

8. Clear your browser cache and log on to the My Cloud Services console to see your changes.
    

   Warning

   Note

   If the rebranding does not work as expected, verify that the default custom folder value in the configuration uses the correct directory separator (\\) as mentioned in Before you begin.

To rebrand or skin the My Cloud Services console based on tenants

1. Copy the contents of the installationDirectory\Cloud_UI\custom_sample\skinning\multibrand directory to the installationDirectory\Cloud_UI\custom directory on the My Cloud Services Console host.
2. Create a backup copy of the installationDirectory\Cloud_UI\custom\skinning\css\styles.css file. 
3. Open the installationDirectory\Cloud_UI\custom\skinning\css\styles.css file for editing.
   Each CSS rule includes a helpful comment that describes what the style applies to. 
4. For each tenant, create a new .css file and modify sections in the styles.css file according to how you want the My Cloud Services console to appear.
5. Create customMultiBrandSkinningConfig.json in installationDirectory\Cloud_UI\custom folder by referring to customMultiBrandSkinningConfig_SAMPLE.txt file present at same location.
6. Ensure that the correct .css file is mentioned in the json file. 

7. For customized menu items, refer to customMenuConfig_SAMPLE.json and create customMenuConfig.json file at installationDirectory\Cloud_UI\custom location.
   For example,

   [ {
          "label": "Browser Statistics",
          "name": "browser statistics",
          "type": "submenu",
          "tenants" : ["CirroStratus Inc"]
   } ]
8. Clear your browser cache and log on to the My Cloud Services console to see your changes.