UGX Launcher We are updaing the UGXL Documentation! The old UGX Launcher Documentation prior v0.8.0 can be found here!
Skip to end of metadata
Go to start of metadata


Everything described here is subject to change. It could be possible that a new version will introduce new features or major changes to the stylesheet!


The UGX Launcher is built on top of the GUI framework Qt (

Therefore UGXL is using the Qt Stylesheets (  for themeing.



Theme folder

All themes are stored at



The applications needs to be restarted to recognize newly added themes.

Creating a custom theme

Create a new folder within the theme folder.

Be sure that your theme folder name is unique!

Create (or copy from the default theme) the theme.ugxl file


This file stores a couple of inormation like creator, version info and special settings.

    "Author": {
        "Name": "UGX Mods Team",
        "URL": ""
    "Theme": {
        "Name": "Default",
        "Release": "8 Jun 2014",
        "Version": "v0.8.0-closed-beta",
        "Launcher": "0.8.x.x",
        "Description": "The default theme for the UGX Launcher.<br/><br/>Created by Alexander 'Delta' Diller and Andy 'treminaor' King.<br/><br/>Fonts used: Bebaus Neue, Roboto-Light (license file is in themes/default/fonts)<br/>We use the awesome Material icons by Google <3"
    "Options": {
        "custom": "defined",
        "not": "supported yet"

(theme.ugxl of the default theme)

The format of that file is JSON (



The preview.png (optional) will be displayed in the Settings.
The dimensions of that image are 210x127 (Width x Height).


You can create subfolders to keep your theme folder clear.



 Currently UGL is using one Qt Stylesheet, located at



QSS Editor the QSS Editor can help you to create most of the controls in realtime already.

But this won't work for special UGX Launcher features. Theme variables won't work either!

Qt Stylesheet Documentation

Theme variables

%UGXL%Path to the root directory of UGXL


Designer Mode

UGXL has a special designer mode, which helps during the implementation process.

To enable the Designer Mode, simply create a shortcut to the UGX Launcher.exe and use the -des command argument.


Custom Fonts

You can load custom fonts into UGXL.

Simply drop the .ttf or .otf font into <theme_root>/fonts and it can be used like any other font for styling.

Custom Controls Documentation

UGX Launcher has a couple of custom controls which can be customized within main.qss


Windows are using a method called 9-Grid.

	/* Background Images */
	qproperty-bgTL: url("%UGXL%/Resources/themes/default/toplevel/bg_top_bar_lft.png");
	qproperty-bgTC: url("%UGXL%/Resources/themes/default/toplevel/bg_top_bar_cnt.png");
	qproperty-bgTR: url("%UGXL%/Resources/themes/default/toplevel/bg_top_bar_rgt.png");
	qproperty-bgML: url("%UGXL%/Resources/themes/default/toplevel/bg_mid_con_lft.png");
	qproperty-bgMC: url("%UGXL%/Resources/themes/default/toplevel/bg_mid_con_cnt.png");
	qproperty-bgMR: url("%UGXL%/Resources/themes/default/toplevel/bg_mid_con_rgt.png");
	qproperty-bgBL: url("%UGXL%/Resources/themes/default/toplevel/bg_bot_bar_lft.png");
	qproperty-bgBC: url("%UGXL%/Resources/themes/default/toplevel/bg_bot_bar_cnt.png");
	qproperty-bgBR: url("%UGXL%/Resources/themes/default/toplevel/bg_bot_bar_rgt.png");



	qproperty-bgColor: #111; /* Background color */
	qproperty-borderColor: #FF0000; /* Bordor color */
	/* TAB */
	qproperty-tabW: 80; /* Tab width */
	qproperty-tabH: 30; /* Tab height */
	qproperty-paddingBorder: 10; /* Padding to the window border (top/right) */
	qproperty-paddingElement: 8; /* Padding between each state */
	qproperty-paddingVertical: 5; /* Padding between line and label */
	/* Tri-Radio State (top right info) */
	qproperty-lineW: 65; /* Line Width */
	qproperty-lineH: 2; /* Line Height */
	/* Tri-Radio State Colors */
	qproperty-triColorLeft: darkred;
	qproperty-triColorMiddle: orange;
	qproperty-triColorRight: limegreen;
	qproperty-fontStateInfo: bold italic large "Times New Roman";


More will follow


Share and submit your theme