USING CUSTOM PLESK SKINS > Creating a Skin

Customizable Properties

Every type of element of the user interface that can be customized is described by the corresponding selectors within the appropriate CSS files of the skin. This section considers the areas of the user interface and gives the listing of these selectors and elements they correspond to, as well as provides simple examples of using these selectors in the CSS files.

General

The properties that are common for all areas of interface, assigned in the file general.css.

Table 2.1. General properties

UI ElementSelectorCSS code sample
common background, fontbody, td, th
body {
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
  color: #000000;
  background-color: #f6f6f6; 
}

td, th  {
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
}
form elementsinput, select, textarea
input, select, textarea { 
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; 
  font-size: 11px; 
}
linka
a:link, 
a:visited,
a:hover {
   color: #0240a3;
}

Further, for the specific elements, these properties can be redefined as desired.

Top Area

  1. logotype image
  2. background
  3. frame separator line
  4. top left image

Table 2.2. Top area properties

NSelectorCSS code sample
1.can be set through the user's interface, but the default image is contained in the skin (images/def_plesk_logo.gif)
-
2, 3.body
body {
  background-color: #ffffff;
  background-image: url(../../images/top_bg.jpg);
  background-repeat: repeat-x;
  background-position: left bottom;
}
4..body
.body {
  background-image: url(../../images/top_body_bg.jpg);
  background-repeat: no-repeat;
  background-position: top right;
}

Left Navigation Area

  1. background
  2. navigation sections header background
  3. navigation sections header
  4. expand/collapse navigation section
  5. navigation section area
  6. navigation item
  7. selected navigation item
  8. logged in user info
  9. context help
  10. 'powered by' logotype image

Table 2.3. Left navigation area properties

NSelectorCSS code sample
1.body
body {
  background-color: #6e89dd;
}
2.

.navOpened

.navClosed

.navOpened,.navClosed {
  background-color: #ffffff;
}
3.

.navOpened .navTitle .titleText

.navClosed .navTitle .titleText

.navOpened .navTitle .titleText, 
.navClosed .navTitle .titleText {
  color: #215dc6;
}
3.

Mouse over

.navOpened .navTitleOver .titleText

.navClosed .navTitleOver .titleText

.navOpened .navTitleOver .titleText,
.navClosed .navTitleOver .titleText {
  color: #428eff;
}
4..navTitle .titleHandle
.navTitle .titleHandle {
  background-color: #215dc6;
}
4.

Mouse over

.navTitleOver .titleHandle

.navTitleOver .titleHandle {
  background-color: #428eff;
}
5..tree
.tree {
  background-color: #d6dff7;
}
6..name
.name a:link,
.name a:visited,
.name a:active {
  color: #215dc6;
}

.name a:hover {
  color: #428eff;
}
7..nodeActive .name
.nodeActive .name {
  background-color: #3878bf;
 }
 
.nodeActive .name a:link,
.nodeActive .name a:hover,
.nodeActive .name a:visited,
.nodeActive .name a:active {
  color: white;
}
8.#userInfo
#userInfo {
  color: #555555;
}
9.#contexthelp
#contexthelp {
  color: #555555;
  border-top: 1px solid #A7B8EB;
}
10.body
body {
  background-image: url(../../images/powered_by.gif);
  background-position: left bottom;
  background-repeat: no-repeat;
}

Main Area

The main area consists of two smaller areas:

  1. screen title - the title of the currently displayed screen
  2. screen content - the currently available (visible) set of operations, input forms, lists, etc.

Following is the description of sub-areas that compose the main area and of their elements in detail.

Screen Title

  1. path bar
  2. title
  3. 'up level' link

Table 2.4. Screen title properties

NSelectorCSS code sample
1..pathbar
.pathbar {
  background: #ffffff;
  color: #444444;
}

.pathbar a:link,
.pathbar a:visited,
.pathbar a:hover {
  color: #444444;
}
2..screenTitle
.screenTitle {
  background: #ffffff;  
}

.screenTitle td {
  font-size: 18px;
  font-family: "Franklin Gothic Medium", Verdana, Arial, sans-serif;
  color: #000000;
}
3.

.uplevel .commonButton span

icon can be changed using #bid-up-level in buttons.css

.uplevel .commonButton span {
  text-decoration: underline;
}

in buttons.css:

#bid-up-level span {
  background-image: url(../../images/btn_uplevel_bg.gif);
}

General Screen Content

  1. screen content background
  2. fieldset for grouping ui elements
  3. fieldset title

Table 2.5. General screen content properties

NSelectorCSS code sample
1.body
body {
  background: #F9F8F8;
}
2.fieldset
fieldset {
}

Presently not available, using default value.

3.legend
legend {
  color: #0046D5;
}

Tools

The set of operations at the current screen:

  1. tool
  2. tool (disabled)
  3. separator

Table 2.6. Tools properties

NSelectorCSS code sample
1.

.toolsArea .commonButton

icons are customized through id's (e.g. #bid-report) in buttons.css

.toolsArea .commonButton {
  text-decoration: underline;
}

in buttons.css:

#bid-report {
  background-image: url(../../images/btn_report_bg.gif);
}
2.

.toolsArea span.commonButton

icons are customized through id's (e.g. #bid-report) in buttons.css

.toolsArea span.commonButton {
  color: #999999;
  text-decoration: none;
}

in buttons.css:

#bid-register-disabled {
  background-image: url(../../images/btn_register-disabled_bg.gif);
}
1.hr
hr {
  color: #cccccc;
  background-color: #cccccc;
  height: 1px;
}

Lists

The list of objects:

  1. operations on lists
  2. table header
  3. table header (list sorted by selected parameter)
  4. table's rows

Table 2.7. Lists properties

NSelectorCSS code sample
1.

.buttons .commonButton span

icons are customized through id's (e.g. #bid-report) in buttons.css

.buttons .commonButton span {
  text-decoration: underline;
}

in buttons.css:

#bid-show-all span {
  background-image: url(../../images/btn_show-all_bg.gif);
}
2.th
th {
  text-align: left;
  background: #D6DFF7;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

th a:link, 
th a:visited {
  color: #000000;
  text-decoration: none;
}

th a:hover {
  text-decoration: underline;
}
3..sort
.sort {
  background-color: #ABBEEF; 
}
4.

.oddrowbg - for odd rows

.evenrowbg - for even rows

.evenrowbg {
  background-color: #F0F0F0; 
}       
.oddrowbg {
  background-color: #ffffff;
}

Dialog Forms

  1. parameter name
  2. 'required' indicator
  3. footnote
  4. button

Table 2.8. Dialog forms properties

NSelectorCSS code sample
1..name
.name {
  font-weight: bold;
  color: #555555;
}
2..required
.required {
  color: #cc0000;
}
3..footnote
.footnote {
  color: #666666;
}
4.

.commonButton

.buttons .commonButton span

icons are customized through id's (e.g. #bid-report) in buttons.css

.commonButton button {
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #000000;
  background-color: transparent;
  background-image: url(../../images/btn_bg.gif);
  border: 0 solid white;
  background-repeat: no-repeat;
}

in buttons.css:

#bid-ok button {
  background-image: url(../../images/btn_ok_bg.gif);
  padding-left: 8px;
}

Tabs

Properties of certain system objects can be grouped by means of tabs:

  1. tab item
  2. active tab
  3. last tab
  4. tabs panel

Properties of tabs are defined in the tabs.css file.

Table 2.9. General properties

UI elementSelectorCSS code sample
1. 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;
}
2. 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;
}
3. Last tab#tabs last
#tabs .last a {
background-image:url("../../icons/tabs/right_last.gif");
}
4. 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;
}

Help

The Help pages properties that can be customized:

Table 2.10. Help properties

UI ElementSelectorCSS code sample
Header level 1h1
h1 {
  font-size: 16px;
}
Header level 2h2
h2 {
  font-size: 14px;
}

Skin Description

Once you are done with preparing CSS and image files, you can create a description file for it. You can choose to edit the file you copied from a standard Plesk skin, or create a new info.xml file.

Following is the source code that you can use for your description file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE PLESKSKIN SYSTEM "pleskskin.dtd">
<PLESKSKIN>
 <INFO>
  <PLESKVERSION>7.5.x</PLESKVERSION>
   <VERSION>1.0.0</VERSION>
	<DATE>2004-12-8</DATE>
	 <NAME>
	  <LOCALESTRING language="en">Your skin name</LOCALESTRING>
	 </NAME>
	 <DESCRIPTION>
	  <LOCALESTRING language="en">Your skin description here</LOCALESTRING>
	 </DESCRIPTION>
    <AUTHOR>Your name here</AUTHOR>
 </INFO>
   <SCREENSHOTS>
	<SCREENSHOT>
	  <NAME>
	    <LOCALESTRING language="en"> Screen title, e.g. Server Administration page </LOCALESTRING>
	  </NAME>
	  <DESCRIPTION>
	   <LOCALESTRING language="en">This is how the control panel's server management
section looks like with my skin</LOCALESTRING>
	  </DESCRIPTION>
	    <SRC>screenshots/screenshot1.gif</SRC>
	    <THUMB>screenshots/screenshot1_thumb.gif</THUMB>
	</SCREENSHOT>
   </SCREENSHOTS>
</PLESKSKIN>

Be sure to place your screenshots and thumbnails to the screenshots/ directory of the skin. You can include as many screenshots as you wish.

Note

Inside each NAME or DESCRIPTION element you can have several entries in different languages. This can be useful, for instance, when the Administrator's control panel language is set to German - the corresponding entries in German will be displayed, if supplied.

To include an entry in German, use the <LOCALESTRING> tag with attribute language="de":

<DESCRIPTION>
	<LOCALESTRING language="en">Your control panel skin description here</LOCALESTRING>
	<LOCALESTRING language="de">Dies ist die Beschreibung Ihres Control Panel Skins</LOCALESTRING>
</DESCRIPTION>

For other languages, please, use the respective two-character language codes.


to top