Article ID: 173892

Latest Review: 3/11/2016

How to change M-Files Desktop and Web UI

theme
Note: the instructions below still work but we recommend you to download the free M-Files Theme Editor tool
from M-Files Solution Catalog to modify the UI of M-Files Desktop. For modifying M-Files Web theme, refer to the
instructions below.

Modifying M-Files Desktop UI Theme

It is possible to change the M-Files Desktop UI look and feel by installing a UI theme application to the vault. You
can customize the task area and search bar background, change the font and background colors in the listing area,
and more. These instructions apply to M-Files 10.1 and later.

Below is a sample UI Theme application that you can use to configure the M-Files Desktop UI.

UI Theme.zip

Modifying the theme application

You can modify and debug the application locally before publishing it to other users:

1. Open M-Files Admin and get the vault GUID from the document vault properties:
2. Check the user ID of your test account from M-Files Server Administrator:

3. Extract the contents of the UI Theme.zip into the following folder C:\Program Files\M-
Files\˂version˃\Bin\ext\UI Theme
 4. Login to the vault. The Desktop UI should now look like this:

5. Replace or modify the images in the Images folder. Close M-Files Desktop (M-Files Shell window) or
navigate to another view to apply changes.

6. Modify mfshell.js file to change the colors and backgrounds in the listing area and task area menus (see
chapter “Modifying the Reference Customization” for details). Close M-Files Desktop (M-Files Shell
window) to apply changes.

7. Once you are satisfied with the modifications, compress the files into a zip file:

Modifying the Reference Customization

You can create your own UI theme by modifying the reference theme application. The actual application logic is in
the theme.js file. The file is written in JavaScript programming language, and it is rather straightforward to edit.
Each affected color, icon and graphics specification is commented in the file. The comment lines begin with
double-slash (//) symbol. Some specifications are 'commented out', i.e. prefixed with double-slash just like the
documentation lines, but they can be taken in to the use by removing the double-slash.

For example, see the groupHeader_TextColor and the groupHeader_FontSize specification below. The latter is
commented out, and therefore not applied.
There are no required theme specifications; each theme specification can be commented out or removed to use
the default UI style.

The application is accompanied with a set of background graphics files. Also a reference logo graphics is included,
as well as certain icon files for demonstration purposes. These files can be modified.

After you change the theme application or graphics do the log out / log in cycle to ensure that the theme is
applied properly.

Modify the Logo

The default logo is read from logo.png file, and referred accordingly in theme.js. The logo dimensions should not
exceed 160 x 50 pixels. The logo can contain transparent parts; in such a case the logo should be saved as 32-bit
PNG file (24-bit color depth + 8 bit alpha channel) to describe the variable transparency.

Modify the Background Graphics

The native background graphics can be changed for task pane (left-edge action area) and for the search pane. The
background graphics forms from image tiles, each image can be replaced with a custom graphics (PNG file). Use
graphics with 24-bit color depth.

The picture below illustrates how the background image tiles are placed and repeated.

Background tiles with explanations:

 Tile name Explanation File name in the reference
application

Task pane top right The task pane top area primary tile. TaskPaneTopRight.png

Task pane top left The left-side filler for the task pane top. TaskPaneTopLeftTile.png
Repeats to the left. This tile may not show
up if the primary tile is large enough.

Task pane middle right The task pane middle area primary tile. TaskPaneMidRight.png
Repeats to down.

Task pane middle left The task pane middle area filler tile. TaskPaneMidLeftTile.png
Repeats to left and down. This tile may not
show up if the primary tile is large enough.

Task pane bottom The task pane bottom area primary tile. TaskPaneBottomRight.png
right

Task pane bottom The task pane bottom area tile that is TaskPaneBottomMiddle.png
middle drawn to the left side of task pane bottom
right tile. This tile may not show up if the
primary tile is large enough.

Task pane bottom left The filler tile for task pane bottom. TaskPaneBottomLeftTile.png
Repeats to the left. This tile may not show
up if the primary tile is large enough.

Search pane top The search pane primary tile. Repeats to SearchPaneTopTile.png
the right.

Search pane down The filler tile for the search pane. Repeats SearchPaneDownAndRightTile.png
and right to the right and down. This tile may not
show up if the primary tile is large enough.

Login pane top The login area primary tile. The login area LoginPaneTopTile.png
shows at the right end of the search pane.

Login pane down and The filler tile for the login area. This tile LoginPaneDownAndRightTile.png
right may not show up if the primary tile is large
enough.

The reference application contains each image file (PNG file). Initial sizes for the default images are large enough
so that the filler tiles do not show up. Each image tile is referred accordingly in theme.js file.

Modifying Task Pane Appearance

Examine the file theme.js and locate the program code that sets the task pane theme. Modify the color values to
match with your preferred theme. The colors are represented with HTML color codes, such as '#1A3B3C'.

The picture below illustrates how each color specification is applied.

Font size changes are not recommended for theming purposes.

Modifying Search Pane Appearance

Font size changes are not recommended for theming purposes.

Other Customization
The listing area main header background color can be customized in theming purposes. These are specified with
sortableHeader_BackgroundColor_Inactive and sortableHeader_BackgroundColor_Active specifications.

Other listing area specifications are not recommended for theming purposes.

Installing the application

1. Once you are satisfied with the modifications, compress contents in the C:\Program Files\M-
Files\<version>\Bin\ext\UI Theme into a zip package (e.g. UI Theme.zip)

2. Open M-Files Admin, select the vault you want to apply the theme, right click and select Applications
 3. Press install and upload the application file

4. Log out from the document vault with M-Files Desktop and re-login. M-Files should ask the permit to
install the new application. Press Allow to proceed.

Modifying the metadata card theme

In M-Files 2015.1 and later, you can also modify the metadata card theme. Please refer to the Configuring the
Metadata Card document for details.
Modifying M-Files Web UI Theme
The UI Theme application does not affect the UI in M-Files Web. Since M-Files Web is a standard web application,
it is possible to customize the UI by replacing the graphics in the Web application folder.

Notice that this customization must be backed up separately and the customizations will reset back to the defaults
when upgrading M-Files Server.

If you wanted, for example, to change the M-Files logo in the Web UI, you must replace the following image files in
the web application folder on M-Files Server. Notice that you have to change <Installation directory> part with the
path of the M-Files installation (e.g. C:\Program Files\M-Files).

Path Size Explanation

<Installation directory>\<Version>\Server\MFWA
\Images\MFilesLogo.png
<Installation directory>\<Version>\Server\MFWA
\Images\MFilesLogoIE6.png
<Installation directory>\<Version>\Server\MFWA
\Icons\Standard\Login.png
140 x 44 M-Files logo with transparent background that
is shown on the tasks area (top left corner)
210 x 86 M-Files logo that flashes for a moment when
user is redirected from login view to Home
view.
271 x 130 Login page logo.