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

Attention

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 (www.qt.io)

Therefore UGXL is using the Qt Stylesheets (http://doc.qt.io/qt-5/stylesheet.html)  for themeing.

 


 

Theme folder

All themes are stored at

<ugxl_root>/Resources/themes/

 

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


theme.ugxl

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

theme.ugxl
{
    "Author": {
        "Name": "UGX Mods Team",
        "URL": "www.ugx-mods.com"
    },
    "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 (www.json.org)

 

preview.png

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.

 

main.qss

 Currently UGL is using one Qt Stylesheet, located at

<ugxl_root>/Resources/themes/<theme_name>/style/main.qss

 

QSS Editor

http://sourceforge.net/projects/qsseditor/ 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

VariableDescription
%UGXL%Path to the root directory of UGXL

Content

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

Windows are using a method called 9-Grid.

FMain
{
	/* 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");
}

 

WMapFilterWidget

WMapFilterWidget
{
	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

TBA