Skinning Guide

MediaMonkey 5 offers unprecedented flexibility with its skins and layouts. Skins and layouts can range anywhere from changing colors and text size to overhauling the entire interface. This guide will walk you through the basics of how to create a new skin.

Introduction to the Skinning Framework

The structure of the MM5 user interface is controlled by HTML, and its styling (Colors, sizing, positioning, margins, padding, etc.) is controlled by CSS. The skinning framework uses a language extension called LESS. Skins are written in LESS, which is then compiled into CSS in runtime. It allows for cleaner and more modular styling, with extensive support for variables and combining classes. The full documentation is available at http://lesscss.org.

Folder structure

All of the LESS styling can be found under the skin folder. The "main" skin file is skin_complete.less, which imports all of the other LESS files. The skinning framework is split into multiple different files for organizational purposes.

• Skin_base controls general properties such as colors;
• Skin_layout controls structural properties such as sizing and structure;
• Skin_animations controls definitions for animations;
• Skin_menu controls pop-up menus (Context menus and header menus);
• Skin_tabs controls tabs in the header;
• Skin_mainwindow controls the general window;

as well as others which are self-explanatory by name.

Icons are held in the skin/icons subfolder. They must all be in SVG format. Icons are organized/named by filename, (Tip: To more easily browse and preview the icons, check out tibold's "svgsee" program, which shows thumbnail previews of svg files: https://github.com/tibold/svg-explorer-extension/releases)

Adding configurable settings to your skin

As of 5.0.2, you do not have to write JavaScript code to add user-configurable settings to your skin. Simply add an item to your skin's info.json, titled skin_options, containing an array of options. We will write detailed information on the supported controls & syntax soon, but you can get started by following the examples of Material Design and Monkey Groove. Additionally, the specifications are described here: https://www.ventismedia.com/mantis/view.php?id=18449

Make sure your JSON syntax is valid. We recommend using an IDE that supports syntax checking, such as Visual Studio Code (however, it is not necessary).

More coming soon