Article ID: 114229, created on Jun 27, 2012, last review on May 10, 2014

  • Applies to:
  • Operations Automation 5.4
For Parallels Automation (PA) 5.4, a new version 3 skin format was designed to implement a new UI layout. PA provides limited backward compatibility for skins designed for PA 5.3 or earlier versions (v.2 and v.1 skins): HTML layouts in PA 5.4 and PA 5.3 coincide wherever it is possible.

In some cases, backward compatibility for old skins cannot be provided.
 

I. Top frame of v.2 skin may not display properly.

Navigation in PA 5.4 Customer Control Panel changed: left menu was dropped and new elements were added to the top frame.
If an old skin is formatted so that, in PA 5.3, a visual connection between the top frame and left navigation menu is implied, it requires a redesign.

For example:
In PA 5.3, the top frame tab elements and menu are bound as in the picture below.

Custom v.2 skin in PA 5.3


In PA 5.4, this skin will not display properly:

Custom v.2 skin in PA 5.4

To remove visual defects, i.e., to place a logo over the top frame controls and make the menu rounded on both sides, apply the following changes to the skin:
  • Add the following to the end of the custom.css file:

#logo{
               height:108px;
}
#logo img{
               position: absolute;
               height: 76px;
}

  • Define the border radius and set sprite for the left menu items (the same as for "rightMenuItems"):

#topMenuItems #rightMenuItems {
  text-align: right;
  background-color: #4269B3;
  padding-right: 12px;
  background: url(../images/client_cp/client-cp_bg.png) left top repeat-x #2a2a2a;
  border-radius: 0 10px 0 0;
}
#topMenuItems #leftMenuItems {
  text-align: left;
  background: url(../images/client_cp/client-cp_bg.png) left top repeat-x #2a2a2a;
  border-radius: 10px 0 0;
}

  • Change the color for | delimiters in the menu (hide them):

#topMenuItems td {
  padding: 0 12px 0 12px;
  color: #2A2A2A;
  white-space: nowrap;
}

 

The picture below shows how the skin will look like after redesigning it:

Custom v.2 skin in PA 5.4 after redesign
 

ac82ce33439a9c1feec4ff4f2f638899 caea8340e2d186a540518d08602aa065 5356b422f65bdad1c3e9edca5d74a1ae 2554725ed606193dd9bbce21365bed4e e12cea1d47a3125d335d68e6d4e15e07

Email subscription for changes to this article
Save as PDF