Customizing messages on the login page of the My Cloud Services console

You can create a static text message (for example, an agreement statement or a copyright message) on the login page of the My Cloud Services console. You must modify sections in the installationDirectory/Cloud_UI/custom/skinning/css/styles.css and installationDirectory/Cloud_UI/custom/i18n/resource-locale_en.js files to create customized messages. 

• • Before you begin
  • To create and display custom messages on the login page

Before you begin

If you want to localize these messages, create localized copies of the installationDirectory/Cloud_UI/custom/i18n/resource-locale_en.js file. These steps are documented at Localizing the My Cloud Services console for version 4.6.

To create and display custom messages on the login page

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. 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. In the localized custom notification message section of the styles.css file, change the display: none; line to display: block;, and save your changes.

   /* 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: block;
   }
5. (optional) Refresh the login page on your browser to see an empty placeholder for your message.
    
6. Open the installationDirectory/Cloud_UI/custom/i18n/resources-locale_en.js file for editing. 

7. Add the message value under the customfields.login.notificationmessage key. 
   For example:

       {
          "key": "customfields.login.notificationmessage",
          "value": "This localizable message will be shown on the login page. The text will wrap onto multiple lines."
      }

8. (optional) Modify any of the other CSS property values to customize the look and feel of the message.
   For example, you can change the width of the message (but still keep it centered) by altering the width and margin-left property values. If you do not want to center the message within the centered message canvas, you can change the text-align property value. 

   Warning

   Note

   You can override any property value by placing it in styles.css. You are not limited to modifying existing property values. 

    

9. Refresh the login page on your browser to see your message.
    

10. Open any other localized resource files (for example, resources-locale_fr.js and resources-locale_fr-fr.js) and add the localized key/value pair. 
    For example:

        {
           "key": "customfields.login.notificationmessage",
           "value": "Ce message localisable sera affiché sur la page de connexion. Le texte se terminera sur plusieurs lignes."
       }