Parallels Plesk Panel

Parallels Plesk Panel

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. All other marks and names mentioned herein may be trademarks of their respective owners.

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 Removing Themes from Panel... 12

C H A P T E R 1 About This Document 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 R 2 Using Custom Themes 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

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. Note: If the utility shows the message "Branding theme is empty", then it means that the user did not customize any settings through the GUI or by using themes. In such a case, no package will be created, and you will need to obtain the default Panel theme package.

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 description version panel skins default css admin custom.css main.css customer contentonly.css custom.css This directory contains files describing the theme package. 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. 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. This includes the components that affect the appearance and branding settings of the Panel. This includes the files and directories that compose the skins. This contains the files that compose the default Panel skin. 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. This contains CSS styles used by the Server Administration Panel part of Parallels Plesk Panel. To customize styles for the screens in Server Administration Panel, add your style definitions to this file. This file contains the default CSS styles used for the Server Administration Panel screens. This contains CSS styles used by the screens seen in Control Panel and Power User Panel. This contains styles for integration of Control Panel screens into the Server Administration Panel screens. This is an empty file. To customize styles for the screens related to Control Panel, add your style definitions to this file.

8 Using Custom Themes main.css plesk.css base.css btns.css custom.css popup.css This is a main file containing most of the default style definitions for screens in Control Panel. This file contains styles for integration of old-plesk-style screens into the layout of Control Panel. 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. 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. This is an empty file. To customize styles, add your style definitions to this file. This contains styles for pop-up windows. img This contains graphics for all screens of the Panel GUI. icons big small This contains graphics files that accompany buttons and links in the Panel GUI. This contains large icons (32x32 pixels). This contains small icons (16x16 pixels). plesk css custom.css left.css This contains CSS styles and image files for the screens that Parallels Plesk Panel 10 inherited from the previous versions of Plesk. This contains CSS styles for the screens inherited from the previous Plesk versions. This is an empty file. To customize styles, add your style definitions to this file. This file contains styles used for the navigation pane, which is shown in the left part of Server Administration Panel.

Using Custom Themes 9 main.css popup.css top.css icons images custom logo url title sb skins This file contains all essential styles for the old-pleskstyle screens, including layout, forms, tables, and icons. This file contains styles for pop-up windows. This file contains styles for the header area of Server Administration Panel (top frame). This contains some of the icons that are used on the screens inherited from the previous Plesk versions. This contains some of the images that are used on the screens inherited from the previous Plesk versions. 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. This is an image file used as a Panel logo. It is stored by Parallels Plesk Panel without a file name extension. This is a text file containing the URL attached to the Panel logo. This is a text file containing the string shown in the browser's title bar. 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. This contains the CSS styles and image files that compose the Web Presence Builder skin.

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 /panel/skins/default/plesk/css/left.css.

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 /panel/skins/default/css/customer/main.css.

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 To remove a theme customized by a reseller, issue the following command: branding_theme -u -vendor <reseller's username>