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)

More coming soon