Introduction
Meridix Studio has support for branding/theming through a Theme provider pipeline.
The following parts of the system can be customized to give your Meridix installation a different look and feel
- Logotypes
- Fonts
- UI colors
- Icons
- Page sections/containers
- Menus (only apperance not content)
- Report chart colors
- XLSX / XLS exported charts colors
- XLSX / XLS Call specification export
- Module names (multi language support)
- Report names (multi language support)
- Subscriber type names (multi language support)
- Link URLs (e.g. support link)
- Help section iFrame content
The login page is fully customizable where the complete page can be changed to match your companys profile.
Getting started
Overview
A theme in Meridix studio is a set of files (css, images, scripts) that is contained in a directory with a specific structure (see below). There is a default theme folder that the systems uses in no other theme is defined. If a custom theme is defined but a requiered resource is not included the system fallback on the default theme resource. This means that you can choose to only include the resources that you have changed in the theme structure.
The custom themes should be created in the defined structure (its recommended to use the default theme as a template) and then zipped (GZIP) into a compressed file with the name ThemeName.zip where ThemeName is the name of the Theme.
During creation of a new theme it can be beneficial to disable the following resource features; minification, client caching and gzipping the content before sending to clients. This can be done by naming the theme with the following suffixes.
- ThemeName.nominify.zip
- ThemeName.noclientcache.zip
- ThemeName.nogzip.zip
- or a combination ex: ThemeName.nominify.noclientcache.nogzip.zip
This will prevent Meridix Studio from using performance optimzation features during development of a new theme. Should not be set on a production theme since it bypasses several optimization features.
The zipped theme file should be available to the Meridix server either locally on the server (this option is not available when hosted externally by Meridix Systems) or on a public accessible URL. When a theme is set in Meridix Studio the system downloads and extracts the custom theme to an internal temporary folder and loads the resources from that folder for future requests. When uploading a new version of an existing theme append an incremented version number in the theme name to bypass the internal theme cache that caches a loaded theme for a minimum of three hours. Ex: ThemeName_V1.nominify.noclientcache.nogzip.zip.
Theme resource structure
The folder (zip file) should be structured as below:
- config
- ui_colors.json
- css
- css/base.css
- help_popup.css
- login_page.css
- images
- favicon_default.ico
- flag_eng.png
- flag_swe.png
- icon_{description}_{size}.png (multiple)
- ....
- load_animation_{description}.gif (multiple)
- ....
- scripts
- login_page.js
- telerik
- common
- grid
- css
- Calendar.Metro.css
- ComboBox.Metro.css
- Grid.Metro.css
- Input.Metro.css
- Menu.Metro.css
- TabStrip.Metro.css
- TreeView.Metro.css
- metro
- Calendar
- sprite.gif
- ComboBox
- rcbSprite.png
- Grid
- AddRecord.gif
- Cancel.gif
- Delete.gif
- Edit.gif
- export.gif
- Filter.gif
- loading_small.gif
- MoveDown.gif
- MoveUp.gif
- PagingFirst.gif
- PagingLast.gif
- PagingNext.gif
- PagingPrev.gif
- Refresh.gif
- rgDrag.gif
- SingeMinus.gif
- SinglePlus.gif
- SortAsc.gif
- SortDesc.gif
- sprite.gif
- Update.gif
- Input
- sprite.gif
- Menu
- rmExpandArrows.png
- TabStrip
- TabStripStates.png
- TreeView
- LoadingIcon.gif
- PlusMinus.png
- TriState.png
- Calendar
- common