Theming is done via QSS, a Qt CSS "derivate" (basically it is css with some extensions)
Stylesheets are explained in detail in the Qt documentation so we'll just cover the BE:Shell specifics here (mainly the used classes)
You can use images but you must either supply full paths ("/home/joe/images/image.png") or place them in the theme directory ("~/.kde/share/apps/be.shell/Themes/myFancyTheme/image.png") and reference them as "${base}/image.png" in the QSS theme.
Notice that this is not a Qt QSS feature, so if you try that with a theme on "dolphin --stylesheel myFancyTheme.css" that will fail!
Elements can be addressed by class, exact class (not through inheritance) or the id.
The #id is just the BE::Plugged applet name, so if you've an applet
[clock\]
Pattern='\<html\>\<small\>'dddd dd. MMM. '\</small\>\<b\> | 'hh:mm'\</b\>\</html\>'
Type=Clock
the theme could include
#clock {
color: #aaaaaa;
font-weight:bold;
font-size:9pt;
padding-bottom:2px;
padding-left:6px;
padding-right:12px;
border: none;
border-left: 2px solid #222222;
}
Classes can be selected as exact class or as matching class
You can also select elements that must be inside other elements:
.BE--Run QTreeWidget QScrollBar :: handle
{
background-color: #aaaaaa;
border: none;
margin-left:3px;
border-radius: 3px;
}
This matches the handle of a scrollbar inside any Treewidget inside the runner.
The "::handle" part is explained in the Qt documentation, a detailed reference on selector is provided by w3.org
BE::Shell widgets are inside the BE namespace.
Since "::" is otherwise used by css, it's replaced by a double dash "--"
That's why you've to write "BE--Run" while you actually mean "BE::Run" (in case you ever look up the code ;-)
Notice that virtually each and every applet will reside in a panel - the panel can be transparent and strutless but it will parent.
Only a trashcan and the desktop icons are directly on the desktop.
Notice: Toplevel panels also support two non standard css properties
Which allow to control (and align) the roundness of the panel and its distance from the contents rect
shadow-radius:12; /*aligns to 12px border radius*/
shadow-padding:4; /*aligns to margin:4px - eg. to create a transparent glass border effect*/
shadow-padding:8 4 20 4; /*top right bottom left*/
shadow-border:rgba(255,255,255,128) 4; /*translucent white 4 border attached to shadow, not panelpx*/
Notice: Those properties are not accurately parsed, ie.
NOTICE That the Main menu is just a plain QMenuBar resp. QMenu
To hit all menus, you may want to select as
.BE--GMenu QMenuBar
NOTICE If the menu vanishes for tight panels, try minimizing its margins and paddings
.BE--Panel QMenuBar { padding:0px; margin:0px; }
.BE--Panel QMenuBar::item { padding: 0px; margin: 0px; padding-left: 4px; padding-right: 4px; margin-right: 4px; }
BE--Task's also can have properties, these could be addressed like
BE--Task[windowMinimized="true"]
which matches minimized tasks
** NOTICE **
For some reason I unfortunately don't know atm, Meters CAN NOT BE SELECTED BY CLASS - seelct them by #id instead:
[RAM]
Mode=NonInactive
PollInterval=5000
Type=RamMeter
and in the theme
#RAM { color: white; }