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.
The properties that are common for all areas of interface, assigned in the file general.css.
UI Element | Selector | CSS code sample |
---|---|---|
common background, font | body, 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 elements | input, select, textarea | input, select, textarea { font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 11px; } |
link | a | a:link, a:visited, a:hover { color: #0240a3; } |
Further, for the specific elements, these properties can be redefined as desired.
Table 2.2. Top area properties
N | Selector | CSS 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; } |
Table 2.3. Left navigation area properties
N | Selector | CSS 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; } |
The main area consists of two smaller areas:
Following is the description of sub-areas that compose the main area and of their elements in detail.
Table 2.4. Screen title properties
N | Selector | CSS 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); } |
The set of operations at the current screen:
N | Selector | CSS 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; } |
The list of objects:
N | Selector | CSS 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; } |
Table 2.8. Dialog forms properties
N | Selector | CSS 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; } |
Properties of certain system objects can be grouped by means of tabs:
Properties of tabs are defined in the tabs.css file.
UI element | Selector | CSS 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; } |
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.
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.