Changing Interface Themes

The following sections explain the basic steps that need to be carried out to customize WSO2 EMM themes applied to all EMM interfaces (i.e., EMM Console, Publisher and Store):

Changing the EMM Console theme

By default, the same EMM Console theme will be applied to all the EMM tenants. However, as the EMM Console supports tenant based themes, if required each tenant will be able to maintain their own theme. In addition, if required, multiple tenants will be able to share the customized themes that have been created in the <EMM_HOME>/repository/deployment/server/jaggeryapps/emm/themes/ directory.

To add a tenant specific EMM Console theme

1. Make a copy of the wso2sinine folder, which is in the <EMM_HOME>/repository/deployment/server/jaggeryapps/emm/themes/ directory, and rename the folder using a preferred name (e.g., Theme1). The theme name will be defined by the folder name.
2. Edit the content in the newly created folder (e.g., Theme1).
   • The CSS changes need to be made in the main.css file, which is in the <EMM_HOME>/repository/deployment/server/jaggeryapps/emm/themes/<THEME_NAME>/css/ directory.
   • Add the customized images to the <EMM_HOME>/repository/deployment/server/jaggeryapps/emm/themes/<THEME_NAME>/img/ directory. Do not change the file names, file dimensions and file extensions.
3. Navigate to the <EMM_HOME>/repository/deployment/server/jaggeryapps/emm/config/tenants/ directory.
4. Create a new folder with the respective tenant's name. For example, if the tenant's name is wso2.com, name the new folder wso2.com.
5. Copy the ui.json file, which is in the <EMM_HOME>/repository/deployment/server/jaggeryapps/emm/config/tenants/default/ directory, to the  <EMM_HOME>/repository/deployment/server/jaggeryapps/emm/config/tenants/<TENANT_NAME>/ directory.
6. Update the following property in the ui.json file. This property defines the currently applied theme.
       "EMM_THEME": "<THEME_FOLDER_NAME>",

   For Example:
       "EMM_THEME": "wso2sinine",

To change the defined default EMM Console theme

1. Navigate to the <EMM_HOME>/repository/deployment/server/jaggeryapps/emm/config/tenants/default/ directory.
2. Update the following property in the ui.json file. This property defines the currently applied theme.
       "EMM_THEME": "<THEME_FOLDER_NAME>",

   For Example:
       "EMM_THEME": "wso2sinine",

To customize the default EMM Console theme

1. Create a backup copy of the default theme (wso2sinine), which is used for the EMM Console.
   • Make a copy of the wso2sinine folder, which is in the <EMM_HOME>/repository/deployment/server/jaggeryapps/emm/themes/ directory.
   • Rename the folder using a preferred name (e.g., ThemeBackup).
2. Edit the content in the default theme folder (wso2sinine).
   • The CSS changes need to be made in the main.css file, which is in the <EMM_HOME>/repository/deployment/server/jaggeryapps/emm/themes/wso2sinine/css/ directory.
   • Add the customized images to the <EMM_HOME>/repository/deployment/server/jaggeryapps/emm/themes/wso2sinine/img/ directory. Do not change the file names, file dimensions and file extensions.

Changing the EMM Publisher theme

EMM Publisher does not support tenant based themes. Therefore, all the tenants will have to use one theme.

To add a new publisher theme

1. Make a copy of the mobileapp folder, which is in the <EMM_HOME>/repository/deployment/server/jaggeryapps/publisher/themes/ directory, and rename the folder using a preferred name (e.g., Theme2). The theme name will be defined by the folder name.
2. Edit the content in the newly created folder (e.g., Theme2).
   1. The CSS changes need to be made CSS files, which is in the <EMM_HOME>/repository/deployment/server/jaggeryapps/publisher/themes/<THEME_NAME>/css/mobileapp/ directory.
   2. Add the customized images to the <EMM_HOME>/repository/deployment/server/jaggeryapps/publisher/themes/<THEME_NAME>/img/mobileapps/ directory. Do not change the file names, file dimensions and file extensions.

3. Navigate to the <EMM_HOME>/repository/deployment/server/jaggeryapps/publisher/config/ directory.

4. Update the following themer function property in the app.js file. This property defines the currently applied theme.

   return '<THEME_NAME>';
   
   For Example:


       themer: function () {
           //TODO: Hardcoded theme
           return 'mobileapp';
       }

Changing the EMM Store theme

EMM Store does not support tenant based themes. Therefore, all the tenants will have to use one theme.

To add a new store theme

1. Make a copy of the store folder, which is in the <EMM_HOME>/repository/deployment/server/jaggeryapps/store/extensions/assets/mobileapp/themes/store/ directory, and rename the folder using a preferred name (e.g., Theme3). The theme name will be defined by the folder name.
2. Edit the content in the newly created folder (e.g., Theme3).
   1. The CSS changes need to be made CSS files, which is in the <EMM_HOME>/repository/deployment/server/jaggeryapps/store/extensions/assets/mobileapp/themes/<THEME_NAME>/css/ directory.
   2. Add the customized images to the <EMM_HOME>/repository/deployment/server/jaggeryapps/store/extensions/assets/mobileapp/themes/<THEME_NAME>/img/ directory. Do not change the file names, file dimensions and file extensions.

3. Navigate to the <EMM_HOME>/repository/deployment/server/jaggeryapps/store/config/ directory.

4. Update the following themer function property in the app.js file. This property defines the currently applied theme.

   return '<THEME_NAME>';

   
   For Example:


       themer: function () {
           /*var meta = caramel.meta();
           if(meta.request.getRequestURI().indexOf('gadget') != -1) {
               return 'modern';
           }*/
           return 'store';
       }/*,