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)
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
- Verify that your configuration specifies the default location property of the custom directory.
For example: com.bmc.cloud.ui.custom.resource.dir=installDirectoryr/custom
If that 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=installDirectoryr/custom (Linux)
com.bmc.cloud.ui.custom.resource.dir=installDirectoryr\\custom (Windows – you must include the double backslash as the default separator)
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 – includes the double backslash as the default separator) - 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"
}
- 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).
- 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.
- 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
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.
If you will add new images to the console, add those files to the installationDirectory/Cloud_UI/custom/skinning/img directory.
One of the background images for the Login page
- Create a backup copy of the installationDirectory/Cloud_UI/custom/skinning/css/styles.css file.
- 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. 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.
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.- 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.
Clear your browser cache and log on to the My Cloud Services console to see your changes.