Editing WebMail Templates

The advice offered on this page should only be used by users who are confident in the modification of HTML pages. If you are unsure about this process, we recommend that you first learn a basic knowledge of HTML before you continue to make any modifications. For more detailed information on what each option of the WebMail settings is for, please view the WebMail page.

What are WebMail Templates and How Do They Work? #

The pages displayed by the WebMail service are a combination of static HTML files and images, together with dynamic data loaded from the WebMail Application Programming Interface (API). The WebMail service by default uses an integrated web server on port 8000 to run both the static and dynamic content. Port 80 is the default HTTP port but usually this will be already in use by a web server such as Internet Information Services (IIS). You can, however, configure IIS to host a website for the static content of your WebMail template by pointing this at the WebMail template folder. This will allow the static content to be loaded by IIS on port 80 and the dynamic content to be loaded via API calls to the WebMail API server on port 8000 allowing you to access in your web browser via a normal domain (e.g. http://www.yourdomain.com) without having to append :8000 for the non-standard port.

Before Making Changes #

It is important that before making any changes, you create a copy of the 'default' template folder. This folder should be appropriately named, such as 'My Company WebMail'. This is important as installing future software updates may result in the default template being updated. This means that without correctly creating a copy of the default template folder, you may lose your changes when you next install an update. You will also need to update the WebMail service settings to use this new template folder.

Quick Changes #

The default template is designed so that certain common modifications are easy to achieve, these are listed below.

Changing the Code Crafters Logo

The simplest modification to the template is to change the 'Code Crafters' logo to your own company logo. To achieve this you need to replace the logo image 'images/Logo.png' file. If you need to change the logo to a file format other than png or wish to remove the logo altogether you will need to modify the 'app\components\navbar\navbar.component.html' file on the line containing 'Logo.png'.

Changing the Color Scheme

If you want to make WebMail better match your company color scheme, this can achieved by using notepad or wordpad to edit the file 'css/site.css' by adjusting the HTML color values and then re-saving the file. The effect can dramatically alter WebMail's look and feel and instantly blend better with your main website.

Using a Content Delivery Network (CDN)

You can choose for your users to download 3rd party CSS and JavaScript files from a content delivery network (CDN) rather than your web server. This is especially useful if you have a slow connection or want to reduce the load on your server and also to allow better caching as these files may already have been downloaded for use with other websites the user has visited. To switch to a content delivery network for these files, we recommend you rename your 'index.html' (rather than delete it) then rename your 'index.cdn.html' to 'index.html'. Make sure that any adjustments are also made on your network to allow access to the content delivery network Urls.

Template Customizations #

It is important to understand that the 'default' template is designed for editing, but some things need to remain unchanged, such as filenames and structure. Currently all existing HTML files and most other files cannot be renamed or removed as the filenames and assumed existence is a permanent part of WebMail. For this reason we recommend you do not rename or delete any of the existing files. Additionally, any HTML forms or API interaction should be changed with caution to make sure existing functionality is not affected or broken.

Language Translations #

WebMail currently supports 52 different language translations. These are built into the settings system so the list of supported languages is fixed. If you want to suggest a new language you would like to be added to Ability Mail Server or any corrections to existing translations, please Contact Us.

Changing the Default Language

The default language is the language that is used before you have logged when a user specific language is not yet known, or if for some reason a user specific language has not been chosen correctly. The default language can be changed by opening the 'config.json' file at the root of the WebMail template and changing the 'defaultLanguage' option to any valid language code. See below for a list of all supported language codes.

Changing Language Translations

Within the "content" folder of the WebMail template is a subfolder for each supported language, each with several language files for the various parts of WebMail. The file format is JSON which is a simple list of key / value string pairs.

Example 'en-US ' JSON content from 'modals.json':

    "cancel": "Cancel",
    "no": "No",
    "ok": "Ok",
    "yes": "Yes"

The first of the string pairs on each line is the key; this must not be changed as WebMail looks for this key for specific translations. The second of these strings is the actual translation that will be used. You can refer to other languages such as en-US for the original English translations to help you customize your other language translations.

Example 'es ' JSON content from 'modals.json':

    "cancel": "Cancelar",
    "no": "No",
    "ok": "Vale",
    "yes": "Sí"

Escaping Special Characters

You can change the translations as you like but make sure any " or \ characters in the translation are escaped with a pre-pended backslash (e.g. \" or \\) so that the JSON knows that these are quotes and backslashes in the translation and not the end of the translation string.

Example 'ro' JSON content from 'validation.json' using \" instead of " to escape the quotes:

    "emailAddressList": "Trebuie să fie o listă de adrese de e-mail validă (separate prin \";\")",

Example 'uk' JSON content from 'countries.json' using \\ instead of \ to escape the backslash:

    "VN": "В\\'єтнам",

Supported Languages #

Please see below for a list of currently supported languages:

Language Code Language Name
af Afrikaans
ar Arabic
bs-Latn Bosnian (Latin)
bg Bulgarian
ca Catalan
zh-CHS Chinese Simplified
zh-CHT Chinese Traditional
hr Croatian
cs Czech
da Danish
nl Dutch
en-GB English (United Kingdom)
en-US English (United States)
et Estonian
fi Finnish
fr French
de German
el Greek
ht Haitian Creole
he Hebrew
hi Hindi
mww Hmong Daw
hu Hungarian
id Indonesian
it Italian
ja Japanese
sw Kiswahili
ko Korean
lv Latvian
lt Lithuanian
ms Malay
mt Maltese
yua Yucatec Maya
no Norwegian Bokmål
otq Querétaro Otomi
fa Persian
pl Polish
pt Portuguese
ro Romanian
ru Russian
sr-Cyrl Serbian (Cyrillic)
sr-Latn Serbian (Latin)
sk Slovak
sl Slovenian
es Spanish
sv Swedish
th Thai
tr Turkish
uk Ukrainian
ur Urdu
vi Vietnamese
cy Welsh