Rebranding BMC MyIT for the universal client

Use the following procedure to rebrand the universal client for your end users.

Starting from the version 2.0.01, instead of modifying myit.war files, you can configure the branding for the Universal Client with the CSS file in Apache Software Foundation\Tomcat7.0\webapps\myit-custom\ (version 2.0.01) or %TOMCAT_HOME%/webapps/tenant-custom-res/000000000000xxx/ (versions 2.1 and 2.2).

Before you begin

Create the following graphics. Put the customer name or logo in the center of the image so that, if the image is too wide to accommodate large displays, the edges will crop towards the center.

DescriptionFilename

Size (pixels)

2.0.01 and later

Size (pixels)

2.0.00

Login page header imagecustom_login.png400 x 1602560 x 260
Main page headercustom_header.png300 x 702560 x 110

To replace the graphic files in the universal client in 2.1 and 2.2

  1. In the Tomcat's webapps folder, create the tenant-custom-res folder (if it's not there yet).
  2. Create a new subfolder in the tenant-custom-res folder, and name it with the ID of the tenant which you want to rebrand (usually, the ID looks like 000000000000xxx).
  3. Restart the Apache Tomcat 7.0 service on the MyIT server.
  4. Create the style.css file in the tenant folder. If the file does not exist there, you can use the attached .css file.
    1. For MyIT 2.1, name the CSS file style.css.
    2. For MyIT 2.2, the system turns the style.css file into the style-myit.css and style-smart-it.css files with the identical contents.
      After these steps, the structure for rebranding of the specific tenant will look like this: 
      %TOMCAT_HOME%/webapps/tenant-custom-res/000000000000xxx/style-myit.css
  5. If you want to use new images (like custom_login.png and custom_header.png), you should also copy them into the tenant folder.
    In the style.css or style-myit.css file, add the styles that you want to apply to your MyIT instance. The newly created styles will override the default MyIT styling.
  6. To display the custom images and to modify the logo and colors, edit the style.css or style-myit.css file.
    1. For each custom image, remove the comment markup, and, if needed, modify the background-color property.

      You do not have to specify the full path to the image. Only the file name is required.

      For example, if you have a new login page image, remove the /* and */ for the following segment:

      Example css for custom login image
      .landing-header{
      	background-image:url("custom_login.png");
      	background-position:center;
      	background-repeat: no-repeat;
      	height: 260px;
      	background-color: #FFF;
      }
    2. Modify the following properties in the style.css or style-myit.css as needed.

      Tips

      To identify elements to change while using a Chrome browser, right-click an area and select Inspect Element.

      Make one change, save the file, and refresh the browser to verify the results.



      ModificationCSS property tasks
      Change the Main Page background colorUncomment the following section, and modify the value in red:

      /* .user-nav{ min-width:25%; min-height:110px; background:#FFF; position:relative; } */
      Remove Login page "MyIT Logo"Uncomment the following section:

      /* .landing-header__logo { display: none; } */
      Change font color for Main Menu items -Uncomment the following section, and modify the value in red:
      /* .modules-nav__item-link,.modules-nav__item-link:hover,.modules-nav__item-link:focus{color:#191919;text-decoration:none} */
      Change color of MyIT logo

      Uncomment the following section, and modify the values in red:

      /* .myit-logo{font-size:34px;line-height:1;margin:0} .myit-logo__link,.myit-logo__link:hover,.myit-logo__link:focus{color:#191919;text-decoration:none} .myit-logo__link:hover,.modules-nav__item-link:focus{color:#191919;text-decoration:none} .myit-logo__link:focus{color:#F2F2F2;text-decoration:none} */

      Hide the MyIT logo

      Uncomment the following section:

      /*.myit-logo__link{visibility:hidden}*/

      Font colors for the menu items in the user section on the right
      Change the Logout link font color Uncomment the following section, and modify the value in red:

      /* .user-nav__logout-link,.user-nav__logout-link:hover{color:#191919;text-decoration:none} */
      Change the User Name font color Uncomment the following section, and modify the value in red:

      /* .user-nav__user-link,.user-nav__user-link:hover{color:#191919;text-decoration:none} */
      Change the menu items font color (for "Reservations, Requests, Appointments, Approvals")Uncomment the following section, and modify the value in red:

      /* .user-nav-menu__item,.user-nav-menu__item:hover{text-decoration:none;color:#191919} */
      Change the background color behind user section on the header ribbonUncomment the following section, and modify the value in red:

      /* .user-nav{min-height:110px;background:#FFF} */
      Change the left column under support background color update this section Uncomment the following section, and modify the value in red:

      /* .support-left-col { background: #f2f2f2; width: 300px; display: table-cell; vertical-align: top; } */

       

  7. To change the MyIT logo text, complete the following steps.
    1. On the BMC MyIT server, stop the Apache Tomcat Tomcat7 service:
      net stop "Apache Tomcat Tomcat7"
    2. From the BMC MyIT installation folder, rename ux.war to ux.war.zip.
    3. Unzip ux.war.zip to create a ux.war\ directory. 
    4. In the \installdir\Smart_IT_MyIT\Smart_IT_MyIT\ux.war\app\views\main.html file, replace “MyIT” in the following section.

      <div class="page-header__logo-layout">
      <h1 class="myit-logo"><a href="#" class="myit-logo__link">MyIT</a></h1>
      </div> 

    5. Save the file. 
    6. Restart the Apache Tomcat Tomcat7 service on the BMC MyIT server.
      net start "Apache Tomcat Tomcat7"
       
  8. Go to http://localhost:9000//ux/myitapp to check your rebranding.
  9. If you modified or added the style.css or style-myit.css file, refresh browsers. 

To replace the graphic files in the universal client in 2.0.01

  1. In the Tomcat's webapps folder, create the myit-custom folder (if it's not there yet).
  2. Restart the Apache Tomcat 7.0 service on the MyIT server.
  3. Create the style.css file in the tenant folder. If the file does not exist there, you can use the attached style.css file.
    After these steps, the structure for rebranding of the specific tenant will look like this:
    %TOMCAT_HOME%/webapps/myit-custom/style.css

  4. If you want to use new images (like custom_login.png and custom_header.png), you should also copy them into the tenant folder.
    In the style.css file, add the styles that you want to apply to your MyIT instance. The newly created styles will override the default MyIT styling.

  5. To display the custom images and to modify the logo and colors, edit the style.css file.
    1. For each custom image, remove the comment markup, and, if needed, modify the background-color property.

      You do not have to specify the full path to the image. Only the file name is required.

      For example, if you have a new login page image, remove the /* and */ for the following segment:

      Example css for custom login image
      .landing-header{
      	background-image:url("custom_login.png");
      	background-position:center;
      	background-repeat: no-repeat;
      	height: 260px;
      	background-color: #FFF;
      }
    2. Modify the following properties in the style.css as needed.

      Tips

      To identify elements to change while using a Chrome browser, right-click an area and select Inspect Element.

      Make one change, save the file, and refresh the browser to verify the results.



      ModificationCSS property tasks
      Change the Main Page background colorUncomment the following section, and modify the value in red:

      /* .user-nav{ min-width:25%; min-height:110px; background:#FFF; position:relative; } */
      Remove Login page "MyIT Logo"Uncomment the following section:

      /* .landing-header__logo { display: none; } */
      Change font color for Main Menu items -Uncomment the following section, and modify the value in red:
      /* .modules-nav__item-link,.modules-nav__item-link:hover,.modules-nav__item-link:focus{color:#191919;text-decoration:none} */
      Change color of MyIT logo

      Uncomment the following section, and modify the values in red:

      /* .myit-logo{font-size:34px;line-height:1;margin:0} .myit-logo__link,.myit-logo__link:hover,.myit-logo__link:focus{color:#191919;text-decoration:none} .myit-logo__link:hover,.modules-nav__item-link:focus{color:#191919;text-decoration:none} .myit-logo__link:focus{color:#F2F2F2;text-decoration:none} */

      Hide the MyIT logo

      Uncomment the following section:

      /*.myit-logo__link{visibility:hidden}*/

      Font colors for the menu items in the user section on the right
      Change the Logout link font color Uncomment the following section, and modify the value in red:

      /* .user-nav__logout-link,.user-nav__logout-link:hover{color:#191919;text-decoration:none} */
      Change the User Name font color Uncomment the following section, and modify the value in red:

      /* .user-nav__user-link,.user-nav__user-link:hover{color:#191919;text-decoration:none} */
      Change the menu items font color (for "Reservations, Requests, Appointments, Approvals")Uncomment the following section, and modify the value in red:

      /* .user-nav-menu__item,.user-nav-menu__item:hover{text-decoration:none;color:#191919} */
      Change the background color behind user section on the header ribbonUncomment the following section, and modify the value in red:

      /* .user-nav{min-height:110px;background:#FFF} */
      Change the left column under support background color update this section Uncomment the following section, and modify the value in red:

      /* .support-left-col { background: #f2f2f2; width: 300px; display: table-cell; vertical-align: top; } */

       

  6. To change the MyIT logo text, complete the following steps.
    1. On the BMC MyIT server, stop the Apache Tomcat Tomcat7 service:
      net stop "Apache Tomcat Tomcat7"
    2. From the BMC MyIT installation folder, rename ux.war to ux.war.zip.
    3. Unzip ux.war.zip to create a ux.war\ directory. 
    4. In the \installdir\Smart_IT_MyIT\Smart_IT_MyIT\ux.war\app\views\main.html file, replace “MyIT” in the following section.

      <div class="page-header__logo-layout">
      <h1 class="myit-logo"><a href="#" class="myit-logo__link">MyIT</a></h1>
      </div> 

    5. Save the file. 
    6. Restart the Apache Tomcat Tomcat7 service on the BMC MyIT server.
      net start "Apache Tomcat Tomcat7"
       
  7. Go to http://localhost:9000//ux/myitapp to check your rebranding.
  8. If you modified or added the style.css file, refresh browsers. 

To replace the graphic files in the universal client in 2.0.00

  1. On the BMC MyIT server, stop the Apache Tomcat Tomcat7 service:

    net stop "Apache Tomcat Tomcat7"
  2. From the BMC MyIT installation folder, rename myit.war to myit.war.zip.
  3. Unzip myit.war.zip to create a myit.war\ directory. 
  4. Copy the custom graphic files to myit.war/app/styles/img/login-pic/.
  5. In myit.war/app/views/user/login.html, find <h1 class="landing-header__logo"></h1> and remove the BMC MyIT label. 

  6. In myit.war/app/styles/css/myit.min.css, make the following changes:

    1. Remove the background property: .user-nav{min-height:110px;background:#2e80b5}

    2. To use the new custom_login.png file, replace .landing-header{background:#2e80b5;height:260px}
      with 
      .landing-header{background-image:url("../img/login-pic/custom_login.png");background-position:center;background-repeat: no-repeat;height: 260px}

    3. To use the new custom_header.png file, replace .page-header{background:#2e80b5;color:#fff;margin:0;padding:0;border:none;position:relative;z-index:1;height:110px}  
      with 
      .page-header{background:url("../img/login-pic/custom_header.png")no-repeat center;margin:0;padding:0;border:none;position:relative;z-index:1;height:110px;}

    4. Modify the font colors for the following items:  

      DescriptionSearch ForColor to replace
      Menu items.modules-nav__item-link, .modules-nav__item-link:hover, .modules-nav__item-link:focus#fff
      User Name.user-nav__user-link.user-nav__user-link:hover#fff
      Logout Link.user-nav__logout-link, .user-nav__logout-link:hover#fff
      Smaller menu itemsuser-nav-menu__item.user-nav-menu__item:hover#fff
  7. Restart the Apache Tomcat Tomcat7 service on the BMC MyIT server.

    net start "Apache Tomcat Tomcat7"
     
  8. Go to http://localhost:9080/myit/app to check your rebranding.
Was this page helpful? Yes No Submitting... Thank you

Comments

  1. Doug Bagley

    Please update the directory for the myit-custom folder to be ..\Tomcat7.0\webapps\myit-custom

    Jul 09, 2014 10:29
    1. Gary Beason

      Thanks, Doug. It was correct in the intro, but I fixed step 1 to include the webapps folder. 

      Jul 14, 2014 11:04
  2. Doug Bagley

    Hi Gary, the path for 2.0.01 and 2.1 is \webapps\tenant-custom-res\000000000000001 which provides the multi-tenant support.

    Sep 25, 2014 11:04