For more aspects of the Odin Automation branding, refer to the respective documentation.
Skins are assigned to brands and they cover all control panels of Operations Support System (OSS) and Business Support System (BSS):
Skins do not define the general layout of UI controls, like the positioning and visibility of frames, tabs, tree nodes, and so on - editing the skin has no effect on those.
In the platform, a skin is implemented through an APS 1 package that can contain customization for both versions of the panels.
content/ folder contains sub-folders for each panel version
and common folders that both versions of the panels can use.
content/ folder, a skin developer adds all new files and files to be changed in the skin.
After all works are done with the skin, the developer provides the zipped
content folder for
the Validation and Publication process.
Pay attention to the following skin specifics:
custom.cssfile to customize CP styles.
variables.lessfile in the LESS format to customize UX1. The file is used to compile the respective CSS file every time the skin is assigned to a brand.
images/is the common place for image files to refer from the CSS and LESS files.
images/logos/panel-logo.png is the logo for all control panels in all brands that use the skin.
A general way to customize an image in a CP consists of the following typical steps:
In the CP, find out the internal path to the image using the browser development tools. In the following
example, the internal path to the
Websites icon is
Using your preferable image editing tool, create an image of the same size that you want to replace.
Place the new image in the skin package using the same path relative to the
In the sample package presented earlier, it is
content/meta.xml file contains metadata with the general description of the skin, for example:
<meta> <name>your-sample-skin</name> <description>Sample skin for Control Panels</description> <version>3.0.5-1</version> <vendor>You company name</vendor> </meta>
The file must contain the following elements:
name - the name to be assigned to the packaged APS archive file.
description - skin description.
version- the version to be assigned to the package and the file name of the archived APS package.
vendor - the name of the skin package owner.
To be able to create and modify skins, you need the following: