User Tools

Site Tools


Here is a proposal for the new skinning engine based on Qt4 and Qt Style Sheets.

On-disk file format

Document Root

As in the legacy skinning system, the <skin> tag is the root document element. All valid skins must include a doctype with a reference to the skin DTD.


<?xml version="1.0" encoding="utf-8"?>

Skin Manifest

The skin manifest contains various metadata about the skin. Only one manifest is allowed, and it must be the first immediate child of the <skin> tag.

  • Supports basic attributes: title, author, language, description, uri, version
    • The URI attribute allows specifying a URI from which to download a skin update file.
    • The update file will contain a list of versions available.
    • Mixxx may check the skin version against the list of available versions and notify the user of an update.
  • Supports attributes. Control system properties that are set to the given values on skin load.


  <title>Rainbow Mixin'</title>
  <author>RJ Ryan</author>
  <description>Mixxxin' on Rainbows</description>
    <attribute name="mixxx.master.enabled">false</attribute>
    <attribute name="mixxx.headphone.enabled">false</attribute>
    <attribute name="mixxx.vinylcontrol.enabled">true</attribute>
    <attribute name="mixxx.players.count">4</attribute>


Style controls the styling and presentation of on-screen widgets. The Style tag can directly embed QSS or provide a relative path to a QSS file.

Should styles provided by a skin apply to Mixxx dialogs as well? Pro: Better skin integration. Con: Potentially poor user experience if the skin does not work well on the dialogs.

For more information about QSS, please refer the following:


/* Can style Mixxx-classes with these selectors: */
WWidget { color: #FA0; }
WPushButton { background-color: #FFF; }
/* Can style Qt widget classes like this: */
QLineEdit { border: 1px solid #333; }
/* Can style individually named elements like this: */
#Channel1BpmDisplay { font: bold large "Sans Mono"; }

How can QSS be used to dynamically represent Mixxx controls?

One way that we can use QSS to style dynamic elements of the Mixxx user interface works like this:

QSS selectors can select based on a property of a widget. Let's say we have a button widget that represents the End of Track mode. The [ChannelX],TrackEndMode control takes on different values based on the current end of track mode. The WPushButton that is connected to this control will provide a Qt property named value that indicates the current value of the control. We can style this using QSS using QSS selectors:

The old skin XML for this button was previously defined as this:

	<Tooltip>Helpful text</Tooltip>

So it's clear the button showed a different PNG based on the state of the control. The new specification will go something like this:

<PushButton name="Channel1EndOfTrack">

And its corresponding QSS will be as follows:

WPushButton#Channel1EndOfTrack {
  background-image: url(eot_bg.png);
/* Show a border while hovering */
WPushButton#Channel1EndOfTrack:hover {
  border: 1px solid red;
/* Show a different background based on the widget's 'value' property. */
WPushButton#Channel1EndOfTrack[value=0] {
  background-image: url(eot_stop.png);
WPushButton#Channel1EndOfTrack[value=1] {
  background-image: url(eot_next.png);
WPushButton#Channel1EndOfTrack[value=2] {
  background-image: url(eot_loop.png);


The layout section is the root description of the skin's layout. Each layout section is made up of a number of <window> tags depending on how many windows the skin would like to create.


  <window name="Window1">
    <!-- Widgets/layout for window 1 go here -->
  <window name="Window2">
    <!-- Widgets/layout for window 2 go here -->

Generic Widget

All widgets (children of WWidget) will have the following properties:

  • objectName (inherited property of QObject)
  • maximumSize (inherited from QWidget)
  • minimumSize (inherited from QWidget)
  • toolTip (inherited from QWidget)
  • whatsThis (inherited from QWidget)

All widget declarations will take a form similar to the following:

<WidgetType name="MyWidget">
  <Tooltip>Helpful text for MyWidget</Tooltip>
  <Size> <!-- Size hints for the widget. Make max the same as min for a fixed size widget. -->
  <Connections> <!-- Control connections to the widget. -->


A window is a normal WWidget with all the same attibutes as the base Mixxx widget.


<window name="Window 1">
  <size> <!-- Fixed size of 100x100 -->
    This style is set via
    Is this a good idea? Perhaps it should be considered poor form. 
    color: red;
    <!-- Widgets for this window go here. -->

Widget Group

A Widget Group is a container for widgets. It is a normal WWidget and can have a name. The group can use a Qt layout to manage its children. Potentially, this should be a subclass of QGroupBox.

The options for layouts are simply the main Qt layouts: VBoxLayout, HBoxLayout, GridLayout, StackedLayout. TODO: For things like GridLayout, adding a widget takes arguments (e.g. row, column). The example below cannot handle this.


<group name="PlayerGroup" layout="VBoxLayout">
    <!-- Widgets for this group go here. -->
Translations of this page:
skinning_engine_qt4.txt · Last modified: 2010/06/27 19:22 by rryan