Skin Layout Tutorial

Skin layout tutorial

This is a step by step tutorial that will get you through the basics of creating a Mixxx skin. For extended information on skin creation see Advanced skin techniques.

You are going to create a simple skin called Minimal that will end up looking like this: POSAR FOTO AKI

Getting started

A Mixxx skin is just a folder with various text files and images. The text files define what widgets[1] will be part of the skin, as well as its properties, such as position and size. They are written in XML, see Introduction to XML if you are not familiar with the language. The images are used by Mixxx to represent widgets on screen[2], so you can for example completely customize how a knob looks by drawing the appropriate image with a graphics editor.

To create your skin the first thing you have to do is create the skin folder in the Mixxx resource folder and name it Minimal, which is the name of the skin.

Widget alignment

Widget alignment

Overlapping widgets

balblabla posar resum de metodes per aconseguir algu centrat, widgets que redimensionen segons els parents etc...

overlapping widgets

un widget nomes es veu a traves de la zona que ocupa el parent

1. Widgets are the graphical user interface elements that form a skin, e.g. a knob or a text showing the title of a playing track

2. Widgets are the graphical user interface elements that form a skin, e.g. a knob or a text showing the title of a playing track