Copyright Notice
Parallels Holdings, Ltd.
c/o Parallels International GmbH Vordergasse 59 CH-Schaffhausen Switzerland Phone: +41-526320-411 Fax: +41-52672-2010
Copyright © 1999-2011 Parallels Holdings, Ltd. and its affiliates. All rights reserved. This product is protected by United States and international copyright laws. The product’s underlying technology, patents, and trademarks are listed at http://www.parallels.com/trademarks.
Microsoft, Windows, Windows Server, Windows NT, Windows Vista, and MS-DOS are registered trademarks of Microsoft Corporation.
Linux is a registered trademark of Linus Torvalds. Mac is a registered trademark of Apple, Inc.
Contents
About This Document
4
Using Custom Themes
5
Obtaining a Theme Package from Panel ... 6
Modifying the Files... 7
Installing Themes to Panel ... 12
This document is intended for server administrators and resellers who want to change appearance and branding settings for Parallels Plesk Panel 10 by means of custom themes.
C
H A P T E R1
In addition to customizing through the Panel GUI the logo image, URL attached to it, and browser's title bar text, Parallels Plesk Panel 10 offers the option to change the visual appearance and branding of Panel by using custom themes.
A theme is a set of images and CSS styles that define the look of the interface. The themes can be created and applied to Panel by the server administrator and resellers, one theme per server administrator or a reseller account. The changes to Panel appearance applied by the server administrator are visible to all Panel users. The changes applied by a reseller are visible only to the reseller and their customers. To prepare and apply a custom theme, you will need to do the following:
1. Obtain the files that comprise the default theme installed into Panel. You can do this by using the command line utility branding_theme available from the following directories created by Panel installations:
On Windows systems: %plesk_cli% - this environment variable usually points to the location C:\Program Files\Parallels\Plesk\bin.
On Linux systems: /usr/local/psa/bin/.
The utility packs all the necessary files into a single zip archive. The directory structure of the archive is described in Modifying the Files (on page 6).
If you access the Panel at the reseller level, and do not have the administrator's access to the server over SSH or Remote Desktop, contact your hosting provider for assistance with obtaining the package.
2. Download the archive, unpack it, and modify the contained files according to your needs: Change the CSS styles and replace the graphics files with your own ones. Be sure to preserve the directory structure.
3. Pack the directory containing the modified theme into a zip archive. 4. Upload the archive file to the server and use the command line utility
branding_theme to apply the new theme.
If you access Panel at the reseller level, and do not have the administrator's access to the server over SSH or Remote Desktop, contact your hosting provider for assistance with installing the package.
Note: To apply a theme, Panel requires you to log out and log in again.
In this chapter:
Obtaining a Theme Package from Panel ... 6
Modifying the Files ... 6
Installing Themes to Panel ... 12
Removing Themes from Panel ... 12
C
H A P T E R2
6 Using Custom Themes
Obtaining a Theme Package from Panel
To obtain the files that comprise a Panel theme, use the command line utility branding_theme available from the following directories created by Panel installations:
On Windows systems: %plesk_cli%. This environment variable usually points to the location C:\Program Files\Parallels\Plesk\bin.
On Linux systems: /usr/local/psa/bin/.
The utility packs all the necessary files into a single zip archive.
If you access Panel at the reseller level, and do not have the administrator's access to the server over SSH or Remote Desktop, contact your hosting provider for assistance with obtaining the package.
To retrieve the default Panel theme package, issue the following
command:
branding_theme -p -destination <path/filename.zip>
On Windows systems, you need to specify an absolute path to file, for example: c:\tmp\custom_theme.zip.
To retrieve the theme previously customized and uploaded by the server
administrator, issue the following command:
branding_theme -p -vendor admin -destination <path/filename.zip> On Windows systems, you need to specify an absolute path to file, for example: c:\tmp\custom_theme.zip.
To retrieve the theme previously customized by a reseller, issue the
following command:
branding_theme -p -vendor <reseller's username> -destination <path/filename.zip>
On Windows systems, you need to specify an absolute path to file, for example: c:\tmp\custom_theme.zip.
Using Custom Themes 7
Modifying the Files
After you obtained the package archive, you need to extract its contents into a directory, and make the desired changes to the files.
To learn the locations of files that you need to modify, use the information provided in the table below and in the following section Essential Panel Blocks. The section Essential Panel Blocks illustrates the main parts of Parallels Plesk Panel user interface and describes how to change styles for them.
The following table explains the structure and contents of the directories and files contained within a theme package.
info This directory contains files describing the theme package. description This file contains a theme description. This description is not shown anywhere in the Panel GUI. You can add
your own description, or leave the existing one. version This file contains the Panel version for which this theme package is intended. It is used for internal
purposes; therefore, we do not recommend to change it.
panel This includes the components that affect the appearance and branding settings of the Panel. skins This includes the files and directories that compose the skins. default This contains the files that compose the default Panel
skin.
css This contains common CSS styles used for all types and views of the Panel interface: Server Administration Panel, Power User Panel, and Control Panel. It
contains subdirectories with CSS files that influence visual styles and layout of interface elements.
admin This contains CSS styles used by the Server
Administration Panel part of Parallels Plesk Panel. custom.css To customize styles for the screens in Server
Administration Panel, add your style definitions to this file.
main.css This file contains the default CSS styles used for the Server Administration Panel screens.
customer This contains CSS styles used by the screens seen in Control Panel and Power User Panel.
content-only.css
This contains styles for integration of Control Panel screens into the Server Administration Panel screens. custom.css This is an empty file. To customize styles for the
8 Using Custom Themes
main.css This is a main file containing most of the default style definitions for screens in Control Panel.
plesk.css This file contains styles for integration of old-Plesk-style screens into the layout of Control Panel.
base.css This is the main stylesheet file that keeps the default definitions for styles, fonts, and colors that should be used for various blocks, forms, and so on. All style definitions are grouped in sections and accompanied by explanatory headings formatted as comments. For example: Global Settings, Layout, Login Screen, Statistics, Tools Area, Toolbar, Tabs, Messages, Forms.
btns.css This contains styles for various buttons. All buttons in Panel can be grouped into several essential classes: .btn: A standard button with text commonly
encountered in forms.
.b-btn: A button with a large icon (32x32 pixels) and text below it. This is rarely used on new screens. .s-btn: A button that looks like a hyperlink with a
small icon (16x16 pixels) to the left. This is mainly used in the toolbar, in tables with lists of items and in forms.
.sb-btn: A variant of the .s-btn style button-link. It is used in drop-down menus. For example, it is shown after you click the More Actions link in the toolbar. .m-btn: A button that looks similar to .btn, but is
decorated with larger font and different colors. It is used mostly in promo blocks.
custom.css This is an empty file. To customize styles, add your style definitions to this file.
popup.css This contains styles for pop-up windows.
img This contains graphics for all screens of the Panel GUI. icons This contains graphics files that accompany buttons
and links in the Panel GUI.
big This contains large icons (32x32 pixels).
small This contains small icons (16x16 pixels).
plesk This contains CSS styles and image files for the
screens that Parallels Plesk Panel 10 inherited from the previous versions of Plesk.
css This contains CSS styles for the screens inherited from the previous Plesk versions.
custom.css This is an empty file. To customize styles, add your style definitions to this file.
Using Custom Themes 9
main.css This file contains all essential styles for the old-Plesk-style screens, including layout, forms, tables, and icons.
popup.css This file contains styles for pop-up windows.
top.css This file contains styles for the header area of Server Administration Panel (top frame).
icons This contains some of the icons that are used on the screens inherited from the previous Plesk versions. images This contains some of the images that are used on the
screens inherited from the previous Plesk versions. custom This directory is present in the archive only if the Panel logo image, the URL attached to it, or a browser's title
bar text was previously customized.
If none of them were customized, and you would like to do so, create the subdirectory custom at this level. logo This is an image file used as a Panel logo. It is stored
by Parallels Plesk Panel without a file name extension. url This is a text file containing the URL attached to the
Panel logo.
title This is a text file containing the string shown in the browser's title bar.
sb This directory is present in the archive only if the Web Presence Builder component of Parallels Plesk Panel is installed. It includes the components that affect the appearance and branding settings of Web Presence Builder.
10 Using Custom Themes
Essential Panel Blocks
Server Administration Panel
1. Panel logo. To use a custom logo image:
1. Prepare an image with the height of 50 pixels. If you use an image that is higher or lower than 50 pixels, it will appear distorted.
2. Save it as a file with the name logo. Omit the file extension.
3. Place it into the directory /panel/custom/. If the directory custom does not exist, create it.
2. Header. The styles are located in
/panel/skins/default/plesk/css/top.css.
To redefine the styles for the header, copy the style definitions from the file /panel/skins/default/plesk/css/top.css to the file
/panel/skins/default/plesk/css/custom.css, and modify them there. 3. Navigation pane. The styles are located in
Using Custom Themes 11
To redefine the styles for the navigation pane, copy the style definitions from the file /panel/skins/default/plesk/css/left.css to the file
/panel/skins/default/plesk/css/custom.css, and modify them there. 4. Panels. The styles are located in
/panel/skins/default/css/admin/main.css.
To redefine the styles for the panels, copy the style definitions from the file /panel/skins/default/css/admin/main.css to the file
/panel/skins/default/css/admin/custom.css, and modify them there. 5. An element for collapsing and expanding the left frame. The styles are located in /panel/skins/default/css/admin/main.css.
To redefine the styles for this element, copy the style definitions from the file /panel/skins/default/css/admin/main.css to the file
/panel/skins/default/css/admin/custom.css, and modify them there.
Control Panel
1. Header. The styles are located in
/panel/skins/default/css/customer/main.css. 2. Navigation pane. The styles are located in
/panel/skins/default/css/customer/main.css. 3. Home page. The styles are located in
12 Using Custom Themes
To redefine the styles for the header, navigation pane, or Home page, copy the style definitions from the file /panel/skins/default/css/customer/main.css to the file /panel/skins/default/css/customer/custom.css, and modify them there.
When you have finished with modifying all the necessary files, pack the directory into a ZIP archive, upload it to the server, and install the theme as described in the following section.
If you access the Panel at the reseller level, and do not have the administrator's access to the server over SSH or Remote Desktop, contact your hosting provider for
assistance with installing the package.
Installing Themes to Panel
To install the theme customized by the server administrator, issue the
following command:
branding_theme -i -vendor admin -source <path/filename.zip> On Windows systems, you need to specify an absolute path to file, for example: c:\tmp\custom_theme.zip.
To install the theme customized by a reseller, issue the following
command:
branding_theme -i -vendor <reseller's username> -source <path/filename.zip>
On Windows systems, you need to specify an absolute path to file, for example: c:\tmp\custom_theme.zip.
Removing Themes from Panel
To remove a theme customized by the server administrator, issue the
following command:
branding_theme -u -vendor admin
