User config - Safturento/stbar GitHub Wiki

The user configuration files are loaded from ~/.config/stbar/. Upon installation this will contain a config file that has an empty JSON object, an empty style.css file, and an empty folder named modules. Any custom modules you wish to add can simply be added to the modules folder, and then loaded in through the config file like so

{
	"modules": {
		"left": ["I3", "CustomModule"]
	}
}

Modifying css through style.css file

Documentation on QT's stylesheets can be found here. To style the main stbar you can modify its css through the #stbar identifier, though if you wish to have a transparent bar you will need to instead modify the background color through #bar_right, #bar_left, #bar_center due to the nature of the parent window's transparency in Qt. Each module also has an identifier attached to it automatically that is the same as the name of the module. For example if you wish to change the text color of the Clock module you would add the following to style.css

#Clock {
color: #00ADEF;
}

.Xresources integration

You can also target the Xresources color# values either as a hex value using xrdb-color# or as a, RGB triplet using rgb-xrdb-color#. For example if I wished to color the bar's background using xrdb color0 with 70% transparency and the font color to use xrdb color4 I would write

#bar_right, #bar_left, #bar_center { 
	background:rgb(rgb-xrdb-color0, 70%);
	color:xrdb-color4;
}

Useful CSS

Set global font

* { font: 11px envypn; }

Debugging bar position

#bar_right  { background: #f00; }
#bar_left   { background: #0f0; }
#bar_center { background: #00f; }

Bar margin from edges of screen

#bar_right, #bar_left, #bar_center { margin-top: 15px; }
#bar_right  { margin-right: 15px; }
#bar_left   { margin-left: 15px; }

Individual button margins

#bar_right QPushButton { margin-left: 14px; }
#bar_left QPushButton { margin-right: 14px; }
#bar_center QPushButton { margin: 0 7px; }
#I3 QPushButton { margin:0; }

Switching bar background for button backgrounds

#bar_right, #bar_left, #bar_center { background: none; }
QPushButton, QMenu::item {
	background: rgb(rgb-xrdb-color0, 75%);
}
QPushButton:hover, QMenu::item:selected, QPushButton[i3visible=true] {
	background: rgb(rgb-xrdb-color0, 80%);
	color: xrdb-color3;
}