Theming
Custom Printer Select Icons
When multiple printers are configured, you can customize their icons by placing an icon file in the following directory:
~/KlipperScreen/styles/printers/
- The icon file name must match the exact printer name as configured in
KlipperScreen.conf
. - Supported formats for icons are SVG or PNG.
Example:
cp /path/to/printer_icon.svg ~/KlipperScreen/styles/printers/printer_name.svg
sudo service KlipperScreen restart
Custom Themes
To create a custom theme for KlipperScreen, follow these steps:
-
Create Theme Directory:
- Navigate to
~/KlipperScreen/styles/
. - Create a new folder with the desired theme name.
- Navigate to
-
Add Icon Images:
- Inside the theme folder, create a subfolder named
images
. - Place your SVG icon files here. Refer to the code or default theme for specific icon names used by KlipperScreen.
- Inside the theme folder, create a subfolder named
-
Customize Styles:
- Create a CSS file named
style.css
within your theme folder. - Use existing themes or the default theme as a reference for CSS styles.
- Create a CSS file named
Example procedure for creating a theme named mytheme
:
cd ~/KlipperScreen/styles/
# Create the directory
mkdir -p mytheme/images
# Copy required SVG icons
cp material-light/images/* mytheme/images/
# Create custom styles
echo "window { background-color: #FFFFFF; }" > style.css
- Apply the Theme:
- After creating your theme, restart the KlipperScreen service:
- Select you theme from the list in the options.
Example: Creating a Custom Theme
cd ~/KlipperScreen/styles/
mkdir -p mytheme/images
cd mytheme
cp ../default_theme/images/* images/
echo "window { background-color: #FFFFFF; }" > style.css
sudo service KlipperScreen restart
Example: Custom Background and CSS
Creating a custom background from Mainsail sidebar using Z-bolt icons: