Custom interface theme

From ISPWiki
Jump to: navigation, search

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 function
dashoard.xsl 
Dashboard, the dashboard function
dashboard-report.xsl 
reports in Dashboard
desktop.xsl 
Main menu, the desktop function
editinlist.xsl 
edit form
eula.xsl 
User agreement
extform.xsl 
External forms
extfunc.xsl 
mgr - external functions for Windows
modules.xsl 
list, forms, reports, progress
setvalues.xsl 
handle presets
validator.xsl 
handle validators
notify.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.