Branding Guide

Download

Fundamentals

What is Branding?

Branding (customization) is the ability to make GUI applications (current versions of Backup Manager and Setup Wizard) look in a different way (i.e. change fonts, colors, images, banners, control style, etc).

Branding is a set of files that define the look and feel of the application. The current implementation of branding assumes that the skin is defined by customer and each customer can have the only skin for each server.

Branding consists of set of files that are located in folder common_user\skinning\IP_address\/ common_user\skinning\host_name\ on FTP server and\or ExtraFiles folder on client computer. Files extraSkin.js and extraStyle.qss are describe the whole look and behaviour of controls of Backup Manager.

Click here if you want to download the examples of branding files.

Setup Wizard Branding

General application characteristics

Language settings form

Autoupdate form

Backup destination form

Proxy form

Access control form

Backup destination form

Encryption method form

extraStyle.qss sample code:

#EncryptionMethodForm #lImage
{
    qproperty-pixmap: url(Images/encryption_key.png);
}

Security code form

extraStyle.qss sample code:

#EncryptionKeyForm #lImage
{
    qproperty-pixmap: url(Images/encryption_key.png);
}

Schedule your backup form

extraStyle.qss sample code:

#ScheduleForm #lImage
{
    qproperty-pixmap: url(Images/schedule.png);
}

Files exclusion form

extraStyle.qss sample code:

#ExclusionFiltersForm #lImage
{
    qproperty-pixmap: url(Images/filters.png);
}

Report via e-mail form

extraStyle.qss sample code:

#EmailForm #lImage
{
    qproperty-pixmap: url(Images/email.png);
}

Backup Manager Branding

The structure of extraSkin.js is as follows:

applicationStyle = "native";
applicationIcon  = "Images/WindowIcon.png";
splashScreen     = "Images/Splash.png";
plotCurveColor   = "#FF6600";
trayIcon         = "Images/WindowIcon.png";
trayOfflineIcon  = "Images/WindowOfflineIcon.png";
upgradeLink      = "http://www.iasobackup.com/";

It can contain the following characteristics:

• applicationStyle
  The style of application controls. Normally the following application default styles are available: native, Windows, Motif, Cde, Plastique, CleanLooks. WindowsXP style is appropriate for Windows XP, and Macintosh style is available for Mac OS. native style is a meta-style most suitable for current platform.
• applicationIcon
  Window icon is shown in taskbar and in the upper left corner of the application's top-level windows. Icon should be represented in “.png” format, 16 X 16 pix.
• splashScreen
  A splash screen is an image being shown on screen while an application is starting up.
• plotCurveColor
  Color of curves in statistics plots.
• trayIcon
  Tray icon is shown in traybar. Icon should be represented in “.png” format, 16 X 16 pix.
• trayOfflineIcon
  Tray offline icon is shown in traybar when application loses connection to server. Icon should be represented in “.png” format, 16 X 16 pix.
• upgradeLink
  The link "upgradeLink " appears on Report Form when the contract data limit is not Unlimited.
  There are some parameters in upgrade link such as following:
  %e means e-mail;
  %u means username;
  %p means password.

Splash image

extraSkin.js sample code:

splashScreen = "Images/Splash.png";

Banner

extraStyle.qss sample code:

#MainForm #bspLogoLeftWidget,
#MainForm #bspLogoCenterWidget,
#MainForm #bspLogoRightWidget
{
    min-height: 60px;
    max-height: 60px;
    background-repeat: no-repeat;
}
 
#MainForm #bspLogoLeftWidget
{
    min-width: 283px;
    max-width: 283px;
    background-image: url(Images/banner_left.png);
}
 
#MainForm #bspLogoCenterWidget
{
    border-image: url(Images/banner_center.png);
}
 
#MainForm #bspLogoRightWidget
{
    min-width: 285px;
    max-width: 285px;
    background-image: url(Images/banner_right.png);
}

Main page

extraStyle.qss sample code:

#pluginFsMenuButton
{
    qproperty-icon: url(Images/menuFileSystem.png);
}

Settings page

extraStyle.qss sample code:

#settingsMenuButton
{
    qproperty-icon: url(Images/menuSettings.png);
}

Reports page

extraStyle.qss sample code:

#reportsMenuButton
{
    qproperty-icon: url(Images/menuReports.png);
}

Progress page

extraStyle.qss sample code:

#progressMenuButton
{
    qproperty-icon: url(Images/menuProgress.png);
}

About page

extraStyle.qss sample code:

#aboutMenuButton
{
    qproperty-icon: url(Images/menuAbout.png);
}
#AboutForm #aboutBspImage
{
    min-width: 500px;
    max-width: 500px;
    min-height: 140px;
    max-height: 140px;
    background-image: url(Images/logoAbout.png);
}

Tray window

extraStyle.qss sample code:

#TrayMessage
{
    background-image: url(Images/trayBackground.png);
}
 
#TrayMessage #closeButton,
#TrayMessage #showReportButton,
#TrayMessage #upgradeButton
{
    border-style: none;
}
 
#TrayMessage #closeButton
{
    image: url(Images/trayCloseButton.png);
    width: 20px;
    height: 20px;
}
 
#TrayMessage #showReportButton,
#TrayMessage #upgradeButton
{
    border-image: url(Images/trayReportsButton.png);
}

Download