Introduction

Meridix Studio has support for branding/theming through a Theme provider pipeline.

The web UI layout CSS is not part of the default theming support but it can be altered if desired by overriding CSS rules in on of the themable CSS files.

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 falls back 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 with the defined structure (its recommended to use the default theme as a template) and compress (GZIP) the folder into a file with the name ThemeName.zip where ThemeName is the name of the Theme. There is also an option available to make the theme design phase easier (see On external server as folder structure).

Custom theme location options

There is three ways that the theme resources can be exposed to the Meridix installation.

Locally on the server

The folder (not zipped) should be defined locally in the installation root under the folder [drive]:/[webapp_path]/Themes/ThemeName
In this case no Theme base URL needs to be defined.
This option is not available on Meridix hosted installations

On external server as a zipped archive

The zipped theme file should be available to the Meridix server 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.zip.
The name of the zip file should be the theme name. (Do not add the .zip extension to your theme name setting in Meridix this is added automatically if the package type is set to Zip file)

On external server as folder structure

The theme folder (not zipped) should be available to the Meridix server on a public accessible URL where each individual resouce can be accessed with the url [ThemeBaseUrl]/[ThemeName]/[ThemeResourceRelativePath] ex: http://mycompany.com/Themes/CustomTheme/css/base.css where the http://mycompany.com/Themes is the Theme base URL part and CustomTheme is Theme name and css/base.css is the ThemeResourceRelativePath.

In this case each time a resource is requested (and not found in the server cache) the system loads the resource from the external resource url internally and the caches the resource for future requests.
This method is only recommended during developent of new themes because it requiers the Meridix installation to make several HTTP requests to get the theme content. But its the easiest way to design new themes since you can change the content on a server controlled by you and it will be used by the Meridix installation.

Should not be used in a production environment since it forces the server to make several HTTP requests to get the resources. So when you have used this method during the design phase compress the folder to a zip file with the name [ThemeName].zip and change the Theme package type setting from folder to Zip file.

Configure Meridix Studio to use a custom theme

Only users with the role System Administrators can change theme settings

To change the current theme settings login into your Meridix installation and go to Administration->Settings->Theme settings

The following settings can be changed

Theme name
The name of the theme if not set or an empty theme is defined it will use the Default theme. (Default = "Default"). This value is case sensitive.

Theme base URL
The base URL location of the theme [folder]. This URL have to be accessible by the Meridix studio server through HTTP(s). Ex: http://mycompany.com/meridixthemes/[theme name]

Theme package type

Theme package = The theme content is uploaded as a zipped theme package.
Remote folder = The theme content is available as a folder/directory structure

Theme server cache duration
The number of seconds that the server caches the theme resource before going to the source (external http url). This value can be set to small (ex: 2 seconds) during the design phase to prevent stale data being sent to the client. Default value is 7200 seconds.

Theme client cache duration
The number of seconds that the clients are requested to cache the theme resource before going to the source (external http url). This value can be set to small (ex: 2 seconds) during the design phase to prevent stale data being used by the client. Default value is 7200 seconds.

Disable minification
The system minifies css and javascript files by default. This setting allows you to disable this feature.

Disable Gzip compression
The system gzip compress all resources before sending them to the clients. This setting allows you to disable this feature.

So if your custom theme is located on the publicly available URL http://mycompany.com/meridixthemes/customtheme1/ the Theme name should be custometheme1 and the Theme base URL should be http://mycompany.com/meridixthemes/

When you have changed the theme settings you may need to logout of the system before you can see your changes. Depending on the previous theme settings (cache durations) the old theme resources can be cached both locally or on the server for a while. You may also need to clear your browser cache to force a new GET request for previously cached resources.

Theme resource structure

The theme package (zip file or folder) should be structured as below:

The default theme can be downloaded here and be used as a template. (download and unzip to a local folder and make your changes)

config
- ui_colors.json
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

Branding and theming