2026-08-09
customize, client, ui

The following explains how to customize your iCafeMenu user interface

  • To help users or designers to customize the user interface to suit their specific needs, we've introduced an option to save these changes.
  • As we release new versions weekly, the files are replaced by the latest update. This will reset any changes you’ve made. To keep your changes intact, please follow the steps below:

  1. Inside the iCafeMenu folder, you’ll find an HTML folder containing the main.htm HTML file and themes folder.

Figure 1

  1. The UI is now organized into separate folders for each theme. In addition, the interface is no longer contained in a single main.htm file. Instead, the UI is split across multiple files within each theme folder.
  2. Inside the HTML folder, you'll also find a batch file named chrome.bat. This file is used to launch the iCafeMenu UI by connecting all the HTML files and opening it as a web page
  3. To ensure your edited files remain intact after weekly updates, create a new HTML file and name it as you like (e.g., CustomTheme.htm). The iCafeMenu update process only modifies its default files, so any new files with custom names will not be affected. (Figure 2).

Figure 2

  1. Store all Custom Theme HTML files and folders under a separate folder (Figure 3 & 4).

Figure 3

Figure 4

  1. You need a loader shim at themes/custom/main.htm that loads/injects the actual Custom theme from themes/CustomTheme/main.htm, while supporting both the new and legacy theme loaders. (Figure 5)

Figure 5

  1. To have the client display Custom.htm instead of main.htm, navigate to the Settings page within the Admin Panel and set Client theme as Custom in the Client Settings tab. (Figure 6)

Figure 6

  1. Then scroll down on the same Client settings page until you see the Display section and change Default html file and click Save. (Figure 7)

Figure 7

  1. If you make any changes to CSS files or JS files, you should also rename them.
  2. However, it is important to note that you will also need to rename the CSS file and JS files that are being used by the corresponding HTML file in order for the changes to take effect.
  3. If you intend to use videos for game posters, please use WEBM format instead of MP4, as MP4 is not supported.

Related: