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)

This topic contains the following information:

Before you begin

1. Verify that your configuration specifies the default location property of the custom directory. 
   For example: com.bmc.cloud.ui.custom.resource.dir=installDirectory/custom
   If the property is missing and not properly configured, you will not see your changes. Add this property with your custom directory as the value if it is missing. Depending on how you installed the My Cloud Services console (clmui), verify that the custom directory is set: 
   • If you installed the My Cloud Services console (clmui) on its own host, open the Config.properties file (by default /opt/bmc/CloudPortalWebApplication/tomcat/webapps/clmui/WEB-INF/classes or C:\Program Files\BMC Software\CloudPortalWebApplication\tomcat\webapps\clmui\WEB-INF\classes).
     You should see the following property and value:
     com.bmc.cloud.ui.custom.resource.dir=installDirectory\\Cloud_UI\\custom
     For example:
     com.bmc.cloud.ui.custom.resource.dir=/opt/bmc/CloudPortalWebApplication/Cloud_UI/custom (Linux)
     com.bmc.cloud.ui.custom.resource.dir=C:\\Program Files\\BMC Software\\CloudPortalWebApplication\\Cloud_UI\\custom (Windows)

   • If you did not install the My Cloud Services console (clmui) on its own host but on the Platform Manager host, open the cloudservices.json file (by default C:\Program Files\BMC Software\BMCCloudLifeCycleManagement\Platform_Manager\configuration\cloudservices.json). 
     In the CustomDir section, you should see the attributeValue property whose value is the custom directory:

     {
           "cloudClass" : "com.bmc.cloud.model.beans.AccessAttribute",
           "datatype" : "String",
           "description" : "Directory that contains customization web content",
           "guid" : "780a47aa-d6a9-4894-9aa5-a5fa2ce26cb1",
           "hasValueObject" :
            [
              {
                   "cloudClass" : "com.bmc.cloud.model.beans.AccessAttributeValue",
                   "attributeValue" : "C:\\Program Files\\BMC Software\\BMCCloudLifeCycleManagement\\Cloud_UI\\custom",
                   "guid" : "8b03984d-7750-4ba2-a8f7-8f7ef48fb43d",
                   "name" : "CustomDir"
              }
            ],
            "isOptional" : true,
            "isPassword" : false,
            "modifiableWithoutRestart" : false,
            "name" : "CustomDir"
     }

     Note

     If the attributeValue property is missing or has no value, update it to specify your custom directory (by default, C:\\Program Files\\BMC Software\\BMCCloudLifeCycleManagement\\Cloud_UI\\custom).

     Tip

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

2. Copy the contents of the installDirectory\Cloud_UI\custom_sample directory to the installDirectory\Cloud_UI\custom directory on the My Cloud Services Console host.

3. When you add resource or angular files for your locale, make sure that the encoding in your editor is set to Unicode (UTF-8). Otherwise, your text might be corrupted. 

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.

   Note

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

   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.

   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.

   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.
    

   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

NEW IN 4.6.07

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.