Custom interface theme

From ISPWiki
Jump to: navigation, search


Development and support of an interface theme take a lot of time and efforts. If you do want to develop a custom interface theme, read carefully the documentation below.

The interface consists of xsl, css, and js(files and icons).

Create a directory in /skins/ located in the control panel root. Its name should be different from other themes and "common". Restart COREmanager, and your theme will be available in the list of interface themes (however, selecting this theme will open an empty page).

A new xml with reply is formed for every call. Use xsl templates to convert the xml into a required format, e.g. html. Different xsl templates handle different functions.

List of templates:

Login form, the logon function
Dashboard, the dashboard function
reports in Dashboard
Main menu, the desktop function
edit form
User agreement
External forms
mgr - external functions for Windows
list, forms, reports, progress
handle presets
handle validators
handle notifications

View XML

Add the out=devel parameter to the call to view an XML formed by the control panel.

You can also view the XML in log. Set logging level to 9 for the output module (Main menu -> System status -> Error log -> Settings-> Create, The "xml(core)m б", Level - "9 - code tracing"). By default the log is located in /usr/local/mgr5/var/

XML general description

Each XML formed by the control panel, contains information about the theme, language, etc. This information can be found in attributes of the doc root tag.

Example from the desktop COREmanager function:

<doc lang="ru" func="desktop" binary="/core" host="" stylesheet="desktop" theme="/manimg/orion/" css="main.css" logo="logo.png" logolink="" favicon="favicon.ico" localdir="default/">
current language
function name
server URL where the panels are installed
xsl file name (without extension) handled by this XML. If it is not present, modules.xsl will be handled
path to the current theme
css file name, currently it is not used
logo file name, which is used for brand configuration
logo URL, which is used for brand configuration
favicon name, which is used for brand configuration
path to css files and theme icons that can be re-branded


Icons that can be used for all themes, such as icons for the Main menu, properties, toolbar buttons, modules are located in /usr/local/mgr5/skins/common/img/, and grouped into sprites based on their size

Create div of a corresponding icon, and specify the size class, e.g. s16x16, and button name, e.g. mb-sysstat, and connect the css file of the sprite.css sprite located in /usr/local/mgr5/skins/common/. The same path is used for all themes: /mainimg/common/sprites.css

Sprites :

16x16 px icons that are used in the Main menu, properties.
16x17 px icons that are used in the Sirius interface theme.
24x24 px icons that are used for toolbar buttons.
48x48 px that are used in modules headings.