Theming

Custom printer select icons

When multiple printers are configured, their icons can be customized by placing an icon in:

${KlipperScreen_Directory}/styles/printers/

• The name of the icon must be the exact printer name configured in KlipperScreen.conf
• The format should be svg or png.

Custom themes

To create a custom theme, create a folder in:

${KlipperScreen_Directory}/styles/

The folder name will be the theme name, in that folder create another folder named images this is where the icons should be placed. The icons must be SVG files with specific names that are defined in the code, use the default theme as a reference for the names or check the code.

To edit colors and styles, create a css file named style.css you can use the contents of another theme as a reference.

Example 1

cd ~/KlipperScreen/styles
mkdir -p mytheme/images
cd mytheme
cp ../z-bolt/images/* images/
echo "window { background-color: red;}" > style.css
sudo service KlipperScreen restart

At this point mytheme should be on the list of themes, and when you select it the background should be red.

Example 2

Creating a custom background from Mainsail sidebar and this css using Z-bolt icons

window { background-image: url("/home/pi/mainsail/img/background.svg");}
button {background-color: rgba(0,0,0,0); border-radius:2em;}