48 lines
1.4 KiB
Markdown
48 lines
1.4 KiB
Markdown
# 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
|
|
|
|
```sh
|
|
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
|
|
|
|
```css
|
|
window { background-image: url("/home/pi/mainsail/img/background.svg");}
|
|
button {background-color: rgba(0,0,0,0); border-radius:2em;}
|
|
```
|
|
|
|
|
|
|