Difference between revisions of "Branding"
| [unchecked revision] | [checked revision] |
Ltalaschus (talk | contribs) |
|||
| (6 intermediate revisions by 3 users not shown) | |||
| Line 10: | Line 10: | ||
* Store all files necessary for branding in this newly created folder. Find further details about the branding parameters in [[#Client Branding|Client Branding]] and [[#Web Branding|Web Branding]] below. | * Store all files necessary for branding in this newly created folder. Find further details about the branding parameters in [[#Client Branding|Client Branding]] and [[#Web Branding|Web Branding]] below. | ||
*: '''Important notices:''' The dimensions of the images must remain unchanged and no syntax errors must be made when editing JSON files. If necessary, test the JSON files at http://jsonlint.com/. Sample files can be found in the ‘Branding.sample’ folder located in the ''config'' subdirectory. The ''about.html'' file needs to have an UTF-8 BOM (byte order mark) or else it cannot be loaded. | *: '''Important notices:''' The dimensions of the images must remain unchanged and no syntax errors must be made when editing JSON files. If necessary, test the JSON files at http://jsonlint.com/. Sample files can be found in the ‘Branding.sample’ folder located in the ''config'' subdirectory. The ''about.html'' file needs to have an UTF-8 BOM (byte order mark) or else it cannot be loaded. | ||
| + | * The ''title'' of the ''index.html'' page must be configured in ''index.html''. That page is shown when the Client Access Server (CAS) is accessed without any instance ID. | ||
* [[Management Console - Logging On#Logging On|Log on]] to the Management Console, if not already logged on. | * [[Management Console - Logging On#Logging On|Log on]] to the Management Console, if not already logged on. | ||
* Navigate to ''Navigation > Developer > Management API'' and select ''ReloadBranding'' from the drop down menu then press ''Invoke'' to activate the new branding. | * Navigate to ''Navigation > Developer > Management API'' and select ''ReloadBranding'' from the drop down menu then press ''Invoke'' to activate the new branding. | ||
| Line 15: | Line 16: | ||
=== Limitations === | === Limitations === | ||
Some parts of the Client and Outlook Add-in cannot be branded as they are an integral part of the digitally signed installer packages (e.g. program icons) or are used at an early stage, where no branding information is available yet, like the ''Connect to E-mail Archive dialog''. | Some parts of the Client and Outlook Add-in cannot be branded as they are an integral part of the digitally signed installer packages (e.g. program icons) or are used at an early stage, where no branding information is available yet, like the ''Connect to E-mail Archive dialog''. | ||
| + | |||
| + | While the limited supported parameters allow to quickly create a decent branding without having to deal with CSS at all, not all color schemes are suitable to be used. Thus, a general recommendation is to use darker colors for backgrounds as certain non-brandable text color are white. | ||
=== Client Branding === | === Client Branding === | ||
| − | The following table provides information about the fields available for MailStore Client branding stored in <tt>ClientBranding.json</tt>. | + | The following table provides information about the fields available for MailStore Client branding stored in <tt>ClientBranding.json</tt>. Required values for the MailStore Outlook App also need to be configured in this file. |
{| class="wikitable" | {| class="wikitable" | ||
| Line 33: | Line 36: | ||
|- | |- | ||
| <tt>headerBackgroundColor</tt> | | <tt>headerBackgroundColor</tt> | ||
| − | | Background color of header and hover color of | + | | Background color of header and hover color of buttons, e.g. "#126d9c". Darker colors are recommended as some texts are using a non-brandable white color. |
|- | |- | ||
| <tt>headerLeftImage_autox95_png</tt> | | <tt>headerLeftImage_autox95_png</tt> | ||
| Line 49: | Line 52: | ||
| <tt>gatewayName</tt> | | <tt>gatewayName</tt> | ||
| Custom name that the MailStore Gateway archiving profile is listed under. | | Custom name that the MailStore Gateway archiving profile is listed under. | ||
| + | |- | ||
| + | | <tt>appPublisherName</tt> | ||
| + | | Name of the Outlook App publisher, e.g. "YOURCOMPANY" | ||
| + | |- | ||
| + | | <tt>appPrivacyUrl</tt> | ||
| + | | Privacy URL of the Outlook App publisher, must be https, e.g. <nowiki>https://yourexamplecompany.com/privacy</nowiki> | ||
| + | |- | ||
| + | | <tt>appTermsOfUseUrl</tt> | ||
| + | | Terms of use URL of the Outlook App publisher, must be https, e.g. <nowiki>https://yourexamplecompany.com/termsofuse</nowiki> | ||
| + | |- | ||
| + | | <tt>appColorImage_192x192_png</tt> | ||
| + | | Outlook App icon color image. Required dimension: width: 192px; height: 192px | ||
| + | |- | ||
| + | | <tt>appOutlineImage_32x32_png</tt> | ||
| + | | Outlook App icon outline image. Required dimension: width: 32px; height: 32px | ||
|} | |} | ||
| + | |||
| + | <p class="msnote">'''Important Notice:''' In order for the Outlook App to be uploaded to the Outlook app store, all URLs including the Help URL must begin with ''https''.</p> | ||
=== Web Branding === | === Web Branding === | ||
Latest revision as of 09:36, 6 November 2024
The appearance of MailStore Client, MailStore Web Access, and MailStore Outlook Add-in can be customized easily to match your corporate design.
Modify and Activate Branding
Follow the instructions below to apply your own branding:
- Open Windows Explorer on the Management Server.
- Navigate to the config subdirectory of the MailStore Service Provider Edition installation. (Default: %PROGRAMFILES%\MailStore Infrastructure\config).
- Create a new folder named Branding.
- Store all files necessary for branding in this newly created folder. Find further details about the branding parameters in Client Branding and Web Branding below.
- Important notices: The dimensions of the images must remain unchanged and no syntax errors must be made when editing JSON files. If necessary, test the JSON files at http://jsonlint.com/. Sample files can be found in the ‘Branding.sample’ folder located in the config subdirectory. The about.html file needs to have an UTF-8 BOM (byte order mark) or else it cannot be loaded.
- The title of the index.html page must be configured in index.html. That page is shown when the Client Access Server (CAS) is accessed without any instance ID.
- Log on to the Management Console, if not already logged on.
- Navigate to Navigation > Developer > Management API and select ReloadBranding from the drop down menu then press Invoke to activate the new branding.
Limitations
Some parts of the Client and Outlook Add-in cannot be branded as they are an integral part of the digitally signed installer packages (e.g. program icons) or are used at an early stage, where no branding information is available yet, like the Connect to E-mail Archive dialog.
While the limited supported parameters allow to quickly create a decent branding without having to deal with CSS at all, not all color schemes are suitable to be used. Thus, a general recommendation is to use darker colors for backgrounds as certain non-brandable text color are white.
Client Branding
The following table provides information about the fields available for MailStore Client branding stored in ClientBranding.json. Required values for the MailStore Outlook App also need to be configured in this file.
| Name | Description |
|---|---|
| clientName | Name of the client application, e.g. "YOURCOMPANY - EMAIL ARCHIVE" |
| helpUrl | URL to be opened when clicking on help in client. |
| loginHeaderImage_410x81_png | Header image for login dialog. Required dimension: width: 410px; height: 81px |
| headerBackgroundColor | Background color of header and hover color of buttons, e.g. "#126d9c". Darker colors are recommended as some texts are using a non-brandable white color. |
| headerLeftImage_autox95_png | Left header image. Required dimension: width: auto; height: 95px |
| headerRightImage_autox95_png | Right header image. Required dimension: width: auto; height: 95px |
| about_html | HTML file containing the about site. |
| watermarkImage_300x150_png | Watermark image. Required dimension: width: 300px; height: 150px |
| gatewayName | Custom name that the MailStore Gateway archiving profile is listed under. |
| appPublisherName | Name of the Outlook App publisher, e.g. "YOURCOMPANY" |
| appPrivacyUrl | Privacy URL of the Outlook App publisher, must be https, e.g. https://yourexamplecompany.com/privacy |
| appTermsOfUseUrl | Terms of use URL of the Outlook App publisher, must be https, e.g. https://yourexamplecompany.com/termsofuse |
| appColorImage_192x192_png | Outlook App icon color image. Required dimension: width: 192px; height: 192px |
| appOutlineImage_32x32_png | Outlook App icon outline image. Required dimension: width: 32px; height: 32px |
Important Notice: In order for the Outlook App to be uploaded to the Outlook app store, all URLs including the Help URL must begin with https.
Web Branding
The following table provides information about the fields available for MailStore Web Access and MailStore Outlook Add-in branding stored in WebBranding.json.
| Name | Description |
|---|---|
| webName | Name of the web application, e.g. "YOURCOMPANY - EMAIL ARCHIVE WEB ACCESS" |
| webAbout_html | HTML file containing the about site. |
| webRoot_html | HTML file to be used when no in instance was given in the URL. |
| webHelpUrl | URL to be opened when clicking on help in web access. |
| webLoginHeaderImage_410x81_png | Header image for login dialog. Required dimension: width: 410px; height: 81px |
| webHeaderBackgroundColor | Background color of header and hover color of buttons, e.g. "#126d9c". Darker colors are recommended as some texts are using a non-brandable white color. |
| webHeaderBackgroundImage_autox36_png | Header header image. Required dimension: width: auto; height: 36px |
| outlookAddinName | Name of the Outlook Add-in, e.g. "YOURCOMPANY - EMAIL ARCHIVE ADD-IN". |
| outlookAddinHelpUrl | URL to be opened when clicking on help in Outlook Add-in. |
| watermarkImage_300x150_png | Watermark image. Required dimension: width: 300px; height: 150px |
| favicon_ico | Favicon in 16x16, 32x32, 64x64 pixel. |
| favicon_png | Favicon in 196x196 pixel in PNG format. |
| highlightColor | Color used for section titles, buttons and other controls, e.g. "#6aabce". |
