Creating new skin

Introduction

WebMail Pro uses Less and the skins are presented as sets of .less files, which are compiled into CSS upon building. Below, you'll find information on how to modify and build a skin.

Setting up prerequisites

In order to build a skin, you will need Node.js and npm installed - those provide Node environment and its package manager, respectively.

It is assumed that you're building the skin using the same WebMail Pro installation that skin will be used on. Of course, you can do that on your development system, as long as you have all the WebMail Pro files there.

Specific steps for setting up Node environment would depend on operating system you use. For Windows and Mac, installers are available at Node.js download page. For Linux, you can obtain the source code from the download page - but first, we recommend to check whether Node is available in package manager of the operating system. For example, in case of Ubuntu the following command would install both Node and npm:

sudo apt-get install nodejs npm

While building, it's assumed that main Node executable is called node - however, there are cases when it's called nodejs. To work around that, a symlink needs to be created:

sudo ln -s /usr/bin/nodejs /usr/bin/node

Building skin

1. Download the skin package and extract it into WebMail Pro root directory. This package contains the following:

• skins/MY_SKIN_NAME directory - content used as a ground for creating a new skin;
• package.json - project configuration file;
• Gruntfile.js - grunt configuration file.

2. Open console / command prompt and make sure root directory of WebMail Pro is the current one. Run the following command:

npm install

It will add node_modules directory containing modules required for builder to work.

3. Rename MY_SKIN_NAME directory under skins supplying a name for your new skin.

4. In Gruntfile.js file, search for all occurences of MY_SKIN_NAME and replace those with the new skin name you supplied in the previous step.

5. Now, if you run the following command:

grunt watch-css-only

that will start the builder with watcher status active. The skin will be rebuilt every time any modifications to the skin source files are made.

If you only need to rebuild the skin once, simply use grunt command instead:

grunt

Modifying skin

A skin consists of media data and a set of .less files. 3 of these files have a special purpose:

• styles.less is an entry point for the builder, parsing skin's sources start from it, its name cannot be any different.
  The file holds links to separate files with .less code there. Custom skin should link to those files in Default skin.
• styles-mobile.less is used similarly to styles.less file but it holds links to files required for mobile version to work.
• @theme.less can be treated as skin's configuration file. It holds variables and their values used by Less, as well as Mixins (Less' concept of hooks). The values are mostly self-explaining and the file has numerous comments explaining the purpose of those values.

Typically, it's assumed that custom skin provides its @theme.less files, while other files are loaded from Default skin. However, styles.less can load any .less files, even those ones that would override files from Default skin's directory.

Media resources of the skin usually contain images, fonts (icon font of the skin), and PIE - polyfill for older versions of Internet Explorer.