-
-
Notifications
You must be signed in to change notification settings - Fork 1k
Becoming a Theme Developer
CSS and graphic design are your two basic skillsets when developing themes. Learning them is actually quite easy, albeit a gradual process requiring patience.
- W3Schools offers a sort of manual for learning CSS
- If you prefer videos, this series will work well enough.
Whatever software you use to code or design graphics is up to you. When replacing graphics, just have a look in the software as to where the graphics appear before making your own version.
Mainly you want to create your own folder in your theme directory and copy the graphics from another theme, just to get the idea of what images are used with what filenames. The style.css code is where you'll likely do most of the work.
LMMS depends on the Qt library for customizable, fully-featured UI. Qt effectively uses C++ code to allow us to style the aesthetics of software as if it were a web app. Qt developing their own engine comes with unexpected side effects, however;
- Several features found in modern CSS are missing, such as the use of !important.
- CSS selectors override each other with a ranking system (ID is 100 points, a parent is 1 point, etc)
- Several selectors are fully inherited by others, so modifying a parent class, for example will affect their children.
That last part is a bit confusing. Let's say you had a QWidget, the most basic form of a widget that Qt can offer. Many widgets are a child (or a subcategory, if you will) of QWidget, so styling QWidget means styling every instance of the Qt elements that inherit QWidget.
LMMS developers have created several tags for elements, some of which have uniquely customizable properties in the code. Refer to an existing theme for examples of qproperties.
It usually helps to understand what the hierarchy structure of this software is, before modifying it. LMMS seems to operate as a sort of tree hierarchy, where QMainWindow seems to be the root of the site, and things like the individual buttons in a container wrapper are the end points. Please note that the following hierarchy tree, while intended to describe LMMS in a manner that CSS developers should understand, is incomplete.
QMainWindow
QDialog (loading dialog)
QMenu (you can color it with this apparently)
QMenu (Recent Projects submenu, this is the only submenu apparently)
QMenuBar
QWidget (unknown/unnamed) main toolbar and workspace wrapper
QWidget#mainToolbar
AutomatableSlider (child of QWidget)
::groove
::handle
QLabel (for the master volume and pitch)
QToolButton
QWidget (unknown/unnamed)
CPULoadWidget (wrapper for cpu load)
VisualizationWidget (visualizes waveform and clipping)
M Q QWidget (unknown/unnamed) wrapper for sidebar and workspace
QSplitter (...another wrapper that doesn't include the sidebar buttons?)
::handle
QMdiArea
QWidget (unsure)
[Song Editor and Beat+Bassline/Pattern Editor]
QMdiSubWindow
QLabel
QMainWindow (song/pattern editor)
QToolBar (a mysterious empty toolbar with a handle)
QToolBar (song editor/bb-editor toolbar)
ComboBox (not QComboBox, this is a custom model)
QMenu
QToolButton
QLabel
TrackContainerView
QFrame
QWidget
QWidget
TrackView
QWidget
QPushButton (menu button)
TrackLabelButton
TrackContentWidget
AutomationPatternView
BBTCOView
PatternView
SampleTCOView
QScrollBar
QScrollBar
QPushButton (Resize, close)
[AutomationEditor]
QMdiSubWindow
QLabel
QMainWindow (automation editor)
AutomationEditor
QScrollBar
TimeLineWidget
QToolBar
[PianoRoll is similar]
QMdiSubWindow
QMainWindow
PianoRoll (and it continues like AutomationEditor)
[FX Mixer]
QMdiSubWindow
FxMixerView
FxLine (master channel)
QScrollArea
QWidget
QScrollBar
QWidget
FxLine
QPushButton (close)
QWidget
QPushButton (+)
QWidget
EffectRackView (see Effects section)
[Effects chain of sample editor]
QMdiSubWindow
QPushButton (maximize, close)
EffectRackView
QWidget
QScrollArea
QWidget
QScrollBar
QWidget [this is for any listed effects]
QWidget
QWidget
QPushButton [effect controls button]
QPushButton
[ControllerRack]
QMdiSubWindow
ControllerRackView
QScrollArea
QWidget
QWidget
QWidget
QPushButton
QScrollBar
[Plugin for example Tripleoscillator]
QMdiSubWindow
QLabel
QPushButton (close button)
QWidget
QWidget
QLabel (vol, pan, pitch, range, fx, save)
QScrollBar
QWidget (envelope, effects chain, midi, and ...)
QWidget (unsure, next to SideBar)
QWidget (unsure)
QWidget
QLabel
QScrollArea
QWidget
PluginDescList
PluginDescWidget
QTreeView
::branch:has-children:open etc
::item:selected etc
SideBar
QToolButton (sidebar buttons)