Custom interface theme

Introduction

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.xsl Login form, the logon functiondashoard.xsl Dashboard, the dashboard functiondashboard-report.xsl reports in Dashboarddesktop.xsl Main menu, the desktop functioneditinlist.xsl edit formeula.xsl User agreementextform.xsl External formsextfunc.xsl mgr - external functions for Windowsmodules.xsl list, forms, reports, progresssetvalues.xsl handle presetsvalidator.xsl handle validatorsnotify.xsl 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="https://127.0.0.1:1500" stylesheet="desktop" theme="/manimg/orion/" css="main.css" logo="logo.png" logolink="" favicon="favicon.ico" localdir="default/">
...
</doc>

@lang current language

@func function name

@binary ...

@host server URL where the panels are installed

@stylesheet xsl file name (without extension) handled by this XML. If it is not present, modules.xsl will be handled

@theme path to the current theme

@css css file name, currently it is not used

@logo logo file name, which is used for brand configuration

@logolink logo URL, which is used for brand configuration

@favicon favicon name, which is used for brand configuration

@localdir path to css files and theme icons that can be re-branded

Icons

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 :

sprite-16x16.png 16x16 px icons that are used in the Main menu, properties.

sprite-16x17.png 16x17 px icons that are used in the Sirius interface theme.

sprite-24x24.png 24x24 px icons that are used for toolbar buttons.

sprite-48x48.png 48x48 px that are used in modules headings.