Upgrading the customized My Cloud Services console for version 4.6

Note

The functionality referenced in this topic applies to version 4.6 and later.

If you customized or skinned the 4.5 version of the My Cloud Services console (for example, the accordion header background color) and you want to preserve your customizations in version 4.6, you must perform some manual steps to complete the upgrade.

This topic contains the following information:

Before you begin

Review Preparing-for-upgrades, especially Preserving customizations after upgrade.
Review Rebranding-or-skinning-the-My-Cloud-Services-console.

To upgrade the customized My Cloud Services console

Verify that you had previously copied the contents of the installationDirectory/Cloud_UI/custom_sample directory to the installationDirectory/Cloud_UI/custom directory on the My Cloud Services Console host, as described in Rebranding or skinning the My Cloud Services console.
The custom directory contains the styles.css file where you rebranded or reskinned prominent portions of the My Cloud Services console. For example:
/* The background color of an open accordion panel header */
accordion .open .panel-heading {
background-color: #f2f2f2;
}
Verify that your new images were copied into the installationDirectory/Cloud_UI/custom/skinning/img directory.
Verify that the installationDirectory/Cloud_UI/custom/i18n/resources-locale_en.js file from the 4.5 customization exists.
Upgrade the My Cloud Services console to version 4.6.
Open the installationDirectory/Cloud_UI/custom_sample/skinning/css/styles.css and the installationDirectory/Cloud_UI/custom/skinning/css/styles.css files in a text editor.
Tip
Display the files side-by-side in your text editor so you do not confuse yourself.
1. Copy the following content labelled NEW FOR 4.6 into your installationDirectory/Cloud_UI/custom/skinning/css/styles.css file.
  
  /* The body for the login page marketing content */
  .login-content__item {
     color: #327FB5;
  }
  
  /* NEW FOR 4.6 A place to put a localized custom notification message that will appear at all times on the login page.
     The message can be specified in <customization directory>/i18n/resources-locale_<locale>.js as the value
     for the customfields.login.notificationmessage key.
     To show the message on the page, change the "display: none;" style below to "display: block */
  .custom_notification-container {
     z-index: 1030;
     background-color: #ffffff;
     padding: 10px;
     position: fixed;
     width: 600px;
     left: 50%;
     margin-left: -300px;
     top: 48px;
     text-align: center;
     font-size: 16px;
     border: 1px solid transparent;
     border-radius: 4px;
     display: none;
  }
2. Scroll down and copy the following content labelled NEW FOR 4.6 into the <installationDirectory>/Cloud_UI/custom/skinning/css/styles.css file.
  /* The color of the quota availability icon located in the top banner */
  #banner_user-settings-dropdown span.banner_quota-icon,
  #banner_user-settings-dropdown span.banner_quota-icon:hover, #banner_user-settings-dropdown span.banner_quota-icon:focus {
     color: #f86e00;
     background: transparent;
  }
  /* NEW FOR 4.6 Additional style to set the color of the quota availability icon located in teh top banner */
  #banner_user-settings-dropdown span.banner_quotabg-icon,
  #banner_user-settings-dropdown span.banner_quotabg-icon:hover, #banner_user-settings-dropdown span.banner_quotabg-icon:focus {
     color: #f86e00;
  }
3. Scroll down and copy the following content labelled MODIFIED FOR 4.6 into the installationDirectory/Cloud_UI/custom/skinning/css/styles.css file.
  /* The links on the "My Cart" dropdown panel (hovered or focused) */
  .my-cart .dropdown-menu1 a:hover, .my-cart .dropdown-menu1 a:focus {
     color: #137d73 !important;
  }
  /* MODIFIED FOR 4.6 The links on popups for cells within grids in My Resources. Example: "Add <text> as a filter" */
  .cellPopupLink {
     color: #00a79d !important;
  }
  /* MODIFIED FOR 4.6 The links on popups for cells within grids in My Resources (hovered or focused) */
  .cellPopupLink:hover, .cellPopupLink:focus {
     color: #137d73 !important;
4. Scroll down and copy the following content labelled MODIFIED FOR 4.6 into the installationDirectory/Cloud_UI/custom/skinning/css/styles.css file.
  /* The header text color used for section boxes (Example: Monitoring Rules) */
  .shcomponents #policies .activepolicy .header-title-container h3 {
  color: #333333;
  }
  /* MODIFIED FOR 4.6 The header icons in section boxes (Example: Monitoring Rules) */
  .shcomponents #policies .activepolicy i {
  color: #137d73;
  }
5. Save your changes to installationDirectory/Cloud_UI/custom/skinning/css/styles.css.
Open the installationDirectory/Cloud_UI/custom_sample/i18n/resources-locale_en.js file in a text editor and copy the new customfields.login.notificationmessage key into your installationDirectory/Cloud_UI/custom/i18n/resources-locale_en.js file.
For example:
{
"key": "customfields.login.notificationmessage",
"value": ""
}
This new key is used to create customized messages, as described in Customizing-messages-on-the-login-page-of-the-My-Cloud-Services-console.

To verify the customized version of the My Cloud Services console after the upgrade

Perform these final steps to test if your upgrade to version 4.6 was successful.

Restart Platform Manager.

Clear your browser cache.
Log on to the My Cloud Services console to verify that your customizations are properly displayed in the 4.6 version of the My Cloud Services console.
The accordion background colors and the header font color should be preserved in the 4.6 upgrade.

Where to go from here

When you finish upgrading, inform your user community to flush the cache on their browsers. Otherwise, they run the risk of seeing a confused mix of old and new functionality in their browsers.