Tabs

This sub-area groups properties of certain Plesk objects. The following elements of the sub-area can be customized:

Screen tab

Tabs

  1. Tab item
  2. Active tab
  3. Last tab
  4. Tabs panel

 

Customization samples

UI Element

Selector

CSS code sample

  • Tab item

#tabs a, #tabs li

#tabs a {

display: block;

background:url("../../icons/tabs/right.gif") no-repeat right top;

padding:5px 9px 4px 4px;

vertical-align: baseline;

text-decoration: none;

color: #000000;

}

 

#tabs li {

float:left;

background:url("../../icons/tabs/left.gif") no-repeat left top;

margin:0;

padding:0 0 0 2px;

border-bottom: solid 1px #776655;

}

  • Active tab

#tabs

#current

#tabs #current {

border-width: 0;

}

 

#tabs #current {

background-image:url("../../icons/tabs/left_on.gif");

margin-left: -3px;

}

#tabs #current a {

background-image:url("../../icons/tabs/right_on.gif");

padding:3px 9px 7px 6px;

vertical-align: baseline;

}

  • Last tab

#tabs .last

#tabs .last a {

background-image:url("../../icons/tabs/right_last.gif");

}

  • Tabs panel

#screenTabs, #tabs, #tabs ul

#screenTabs {

float:left;

width: 100%;

min-height: 1px;

height: 1px;

background:#ffffff url("../../icons/tabs/bg.gif") repeat-x bottom;

}

 

td > #screenTabs {

height: auto;

}

 

#tabs {

float:left;

width:600px;

line-height:normal;

white-space: nowrap;

background:#ffffff url("../../icons/tabs/bg.gif") repeat-x bottom;

}

 

#tabs ul {

margin:0;

padding: 0px 10px 10px 10px;

list-style:none;

}