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 depending on the custom theme location zipped (GZIP) into a compressed file with the name ThemeName.zip where ThemeName is the name of the Theme.

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 under the installation root under the folder [drive]:/[webapp_path]/Themes/ThemeName
In this case no ThemeUri 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.nominify.noclientcache.nogzip.zip. 

On external server as folder structure

The theme folder (not zipped) should be to the Meridix server on a public accessible URL where each individual resouce can be accessed with the uri [ThemeUri]/[ThemePath] ex: http://cdn.mycompany.com/Themes/CustomTheme/css/base.css where the http://cdn.mycompany.com/Themes is the ThemeUri part and  CustomTheme is ThemeName.
In this case each time a resource is requested by the Meridix UI the system loads the request from the ThemeUri/ThemeName URL internally and the caches the resource for future requests.
This way is only recommended during developent because it requiers the Meridix installation to make several HTTP reuqest to get the theme content. But its the easiest way to design new themes since you can change the content on server controlled by you and they will be used by the Meridix installation.

Configure Meridix Studio to use a custom theme

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.

Theme package type
Zipfile = The theme content is zipped
Folder = The theme content is available as a folder/directory structure

Theme uri
The base URL location of the theme [folder/zip-file]. This URL have to be accessible by the Meridix studio server through HTTP(s).

When you have changed the theme you need to logout of the system before you can see your changes. Depending on the theme name (.noclientcache etc) the old theme resources can be cached both locally or on the server for a while.

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