Adding discreet XFCE borders to themes

Any theme that has XFWM4 files can be customized if you want borders that are more discreet than the default borders, e.g. this is 2px borders I’m currently using with the Nordic-darker theme.

XFWM4

Inside the xfwm4 folder there are image files that correspond to each element of the frame, e.g. left-active.png and left-inactive.png are the files that generate the active and inactive left side of the window frame.

The images needed to make the entire frame are active and inactive: left, right, bottom, bottom-left, bottom-right, top-left, top-right, title-1…5

If your theme doesn’t have xpm files, you can convert images files to xpm with imagemagick.

for f in ./*.png ; do covert "$f" "{$f%.*}".xpm ; done

xpm files are bitmaps as text in an C style array format, with a header the defines the number of columns, rows, colors, and chars pr pixel.

Copy the xpm files to dom0 and place them in the xfwm4 folder inside the theme, when you delete the image files the xpm will be used to render the window frame.

e.g. if you delete left-active.png then left-active.xpm will be used.

Go through the left, right, bottom, bottom-left, bottom-right, top-left, top-right files and delete the image files one by one, and reload the theme between each file deleted. If there were any errors in the conversion, you need to manually edit the xpm bitmap array.

Customizing the header.

The easiest way to I found to modify the header (title-1…5), was to use the original header image files and the parts I want Qubes OS colored I make transparent, using GIMP.

I don’t delete the image files for the header, and allow the WM to load both the xpm and png files, the xpm files will be displayed first and the png files displayed on top of the xpm image, any transparent part of the png file will be colored by the xpm file.

This allows you to make custom header designs without Qubes OS coloring the entire header, it also means you don’t need to worry about buttons or icons, they are all made using the standard assets from the image files.

4 Likes