Customizing a Theme for the Software Shop

You can use different 'themes' in the Software Shop. This allows you to create your individual appearance. The required changes are explained below.

Storing themes:

  • The themes of a Software Shop are stored in separate folders on managed computers:
    C:\Program Files (x86)\netinst\SoftwareShopConfig\style
  • The folder name corresponds to the theme name.

Installing and activating themes

Use an eScript package to provide a Software Shop theme on managed computes.

Select one of the following tasks to provide a theme as default theme:

  • Create a file userConfig.json in the SoftwareShopConfig folder with the following content:
    {
    "style": "<name of the theme>"
    }
    This file has priority over the configuration in the config.json file that comes with DSM.
  • Enter the name of the theme in the registry under HKEY_CURRENT_USER\Software\NetSupport\NetInstall\SoftwareShop in the style key.
    The setting in the registry has priority over the setting in the userConfig.json file.

If you are shopping actively for a theme in the Software Shop and the active theme changes because it is just being installed, the new theme is displayed immediately.

You can copy and rename the default theme to base your own themes on it. The default theme is available on all managed computes and in the DSM share in SoftwareShopConfig\style\default.

Structure of a theme

The Software Shop has been created using the Qt Toolkit. In general, a theme is based on a stylesheet very similar to the cascading stylesheet (CSS) (a specification language).

Refer to the Qt Help for further information on the syntax and more options for the stylesheets:

Every theme should contain at least the following files:

File Meaning

Colors.json

Defines the color values that cannot be defined in the stylesheet.

Images.json

Defines the graphics for packages, that do not have their own icon, for example.

Style.css

Specifies the looks and partly the behavior of UI elements in the Software Shop. You can customize text, background graphics, colors, frames etc.

Lokalizing the style.css

You can provide localized versions of the style.css. When the Software Shop starts, it looks for localized versions before loading the style.css.

Make sure that the localized files reside in the same folder as the style.css and that their name contains a language abbreviation code ("en","de","fr", "pt", "es", ...). The scheme is <lang>-style.css. For example, the French version is named fr-style.css.

Structure of the Software Shop layout elements

From above, the Software Shop appears to have two parts:

The individual functional areas are attached to QStackedWidget#mainPages as pages:

Page Type Name

Available Software

SoftwareView

pageCatalogue

Postponed Software

SoftwareView

pagePostponedSoftware

My Software

SoftwareView

pageMySoftware

Status

StatusView

pageStatus

Settings

SettingsView

pageSettings

Embedding individual graphics

You can embed JPEG and PNG graphics in the Software Shop. To use these graphics, they must reside in the theme folder or in a child folder.

The syntax depends on where you embed the graphics:

  • Styles.css: Url("!/MyImage.png")
  • Images.json: "!/MyImage.png"

The "!/" notation points to the theme folder.
For example, you must specify "!/res/mylogo.png" so that you can use the graphic file mylogo.png from the res folder.
Graphics that are entered with a colon point to resources that are embedded on the SoftwareShop.exe.

If you use very small graphics, the result may become blurry when upscaled.

Default graphic files from "Images.json":

Tag Default Meaning Size

categoryIcon

This icon precedes the software category:

24x24

pathIcon

This icon precedes the sub categories:

24x24

defaultAppIcon

This is the default software icon for software packages; it is used if no individual icon is available for the software.

150x150

downloadedIcon

This icon is displayed on the tile if the software package is available in the local Repository cache.

64x64

Defining colors

You can specify the colors of the Software Shop in the colors.json file as RGB colors plus transparency (red, green, blue, alpha). A color can take values between 0 (no color) and 255 (full color), as usual. The transparency values range from 0 (completely transparent) to 255 (completely opaque).

Example:
Color definition for a semi transparent red: 255,0,0,128

The Software Shop uses the following colors:

Tag Meaning

dialogBackground

This is the background color of dialogs, for example as in the dialog for filtering software packages.

softwareTileBackground

Default background color of the tile for the individual packages.

softwareTileHover

Background color of the package tile whenever the mouse is hovering over the tile.

softwareTileSelected

Background color of the package tile when the tile is selected.

softwareTileHoverSelected

Background color of the package tile when the tile is selected and the mouse is hovering over the tile.

softwareTileSelectionBorder

Color of the border for the selected tile.

progressLogoRed

progressLogoBlack

progressDarken

Progress bar when closing the Software Shop.

Customizing the style sheet

Sequential processing

The Style.css file is generally processed from top to bottom, i.e. the instructions go from general to specific. For example, at the very beginning you can specify the script size for different UI elements. This process establishes a default which can be overwritten later by specific settings (for example for the same UI element in another context).

Find details on customizing these controls in the Qt help.

Qt provides the following default controls, referenced in the style.css.

Control Meaning
QWidget Basic control for all UI controls

QLabel

Static text field

QCheckBox

Checkbox

QPushButton

Button

QComboBox

Combo box

QProgressBar

Progress bar

QFrame

This is a frame that does not necessarily have a visible boundary. QFrame is often used for grouping UI elements.

QStackedWidget

A stack of controls. Only the top widget is visible. The different pages of the Software Shop are arranged as defined.

QListView

A QListView presents items as a list or icon. The tile view of software packages is implemented like this.

Also, the Software Shop defines its own controls which are partly based on the default controls. All of the properties of default controls are available in this case:

Control Default Control Usage

FontIconPushButton

QPushButton

Icon in the icon bar

ColoredButton

QPushButton

Buttons, e.g. Execute now

SoftwareItemStatusLabel

QLabel

Status of a software package in the tile (e.g. New)

MenuLabel

Qlabel

Tab label

TextUnderline

QWidget

Underscore for selecting the current tab

ToastMessageWidget

QWidget

Text overlay

CheckBoxesWidget

QWidget

List of checkboxes used in the filter dialog

SoftwareDetails

QWidget

Detail view of the software that appears when clicking the Information icon.

MaintenanceTimeWidget

QWidget

24x7 maintenance timeframe

StatusView

QWidget

Status of the Installer on the Status page of the Software Shop

InstallerProgressWidget

QWidget

Progress bar for a running installation

ClientStatusWidget

QWidget

Client status (current site, depot, ...) on the Status page of the Software Shop

SettingsView

QWidget

Settings page of the Software Shop

BackgroundOperationIndicator

QWidget

Rotating icon that is displayed to show an ongoing action.

SoftwareView

QWidget

The pages Available Software. Postponed Software, and My Software of the Software  Shop.

SoftwareActionBar

QWidget

Icon bar

CategoryNavigationBar

QWidget

Breadcrumb navigation within the categories

SoftwareItemTile

QWidget

Tile of a software package with standard size

SoftwareItemSmallTile

QWidget

Downsized tile of a software package

Referencing UI elements

This is the general syntax for referencing UI elements in the Style.css:

SELECTOR {
<Style>
}

It depends on the 'selector' you use whether a specific style definition applies to an individual UI element.

The following example explains how to use selectors:

Examples of Selectors Effect

QLabel {...}

Definition is valid for each QLabel

QLabel#example {...}

Definition is valid for every QLabel named example

QLabel,QPushButton {...}

Definition is valid for each QLabel and QPushButton

CategoryNavigationBar > QListView {...}

Definition is valid for each QListView subordinated to CategoryNavigationBar

ClientStatusWidget QLineEdit {...}

Definition is valid for each QLineEdit subordinated to ClientStatusWidget

Find details in the Qt help.

More examples for the modification of specific areas of the Software Shop:

Action Modification

Changing the background color for all pages

QStackedWidget#mainPages {
background-color: rgb(220, 220, 220);
}

Changing the application name (does not affect the Windows dialog title)

QLabel#labelApplication {
...
qproperty-text: "Neuer Titel";
...
}

Changing the text color of the tile to white (normal and downsized tiles)

SoftwareItemTile QLabel, SoftwareItemSmallTile QLabel {
color: white;
}
Changing the tab texts

MenuButton#pushButtonSoftwareCatalogue QLabel#label{ qproperty-text: "Available Software";

}

MenuButton#pushButtonPostponedSoftware QLabel#label{ qproperty-text: "Postponed Software";

}

MenuButton#pushButtonMySoftware QLabel#label{ qproperty-text: "My Software"

}

MenuButton#pushButtonStatus QLabel#label{ qproperty-text: "Status";

}

MenuButton#pushButtonSettings QLabel#label{ qproperty-text: "Settings";

}

Defining the icons in the menu bar

The icons you use can be specified in the Style.css in the qproperty-iconText property. These icons come from the specific Font Awesome font. The http://fontawesome.io/icons/ website contains an overview of the available icons. The names that are specified there can be used directly.

Example for the "search-minus" icon:

FontIconPushButton#pushButtonZoomOut {
qproperty-iconText: "search-minus";
}

Testing modifications

To test the modified layout of the Software Shop, start the Software Shop with the --develop parameter.
The following icon is displayed on the right-hand side of the Software Shop:

Use the icon to reload a changed theme directly from the hard drive. This way you can test changes 'live' without restarting the Shop.