docs: update theming to add more details
This commit is contained in:
parent
10bf5bdb34
commit
e7ca0ff2af
@ -1,47 +1,80 @@
|
|||||||
# Theming
|
# Theming
|
||||||
|
|
||||||
## Custom printer select icons
|
## Custom Printer Select Icons
|
||||||
|
|
||||||
When multiple printers are configured, their icons can be customized by placing an icon in:
|
When multiple printers are configured, you can customize their icons by placing an icon file in the following directory:
|
||||||
|
|
||||||
_${KlipperScreen_Directory}/styles/printers/_
|
`~/KlipperScreen/styles/printers/`
|
||||||
|
|
||||||
* The name of the icon must be the exact printer name configured in KlipperScreen.conf
|
- The icon file name must match the exact printer name as configured in `KlipperScreen.conf`.
|
||||||
* The format should be svg or png.
|
- Supported formats for icons are 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
|
|
||||||
|
|
||||||
|
Example:
|
||||||
```sh
|
```sh
|
||||||
cd ~/KlipperScreen/styles
|
cp /path/to/printer_icon.svg ~/KlipperScreen/styles/printers/printer_name.svg
|
||||||
mkdir -p mytheme/images
|
|
||||||
cd mytheme
|
|
||||||
cp ../z-bolt/images/* images/
|
|
||||||
echo "window { background-color: red;}" > style.css
|
|
||||||
sudo service KlipperScreen restart
|
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.
|
## Custom Themes
|
||||||
|
|
||||||
|
To create a custom theme for KlipperScreen, follow these steps:
|
||||||
|
|
||||||
### Example 2
|
1. **Create Theme Directory:**
|
||||||
|
- Navigate to `~/KlipperScreen/styles/`.
|
||||||
|
- Create a new folder with the desired theme name.
|
||||||
|
|
||||||
Creating a custom background from Mainsail sidebar and this css using Z-bolt icons
|
2. **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.
|
||||||
|
|
||||||
|
3. **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.
|
||||||
|
|
||||||
|
Example procedure for creating a theme named `mytheme`:
|
||||||
|
```sh
|
||||||
|
|
||||||
|
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
|
||||||
|
```
|
||||||
|
|
||||||
|
4. **Apply the Theme:**
|
||||||
|
- After creating your theme, restart the KlipperScreen service:
|
||||||
|
```sh
|
||||||
|
sudo service KlipperScreen restart
|
||||||
|
```
|
||||||
|
- Select you theme from the list in the options.
|
||||||
|
|
||||||
|
### Example: Creating a Custom Theme
|
||||||
|
|
||||||
|
```sh
|
||||||
|
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:
|
||||||
|
|
||||||
```css
|
```css
|
||||||
window { background-image: url("/home/pi/mainsail/img/background.svg");}
|
/* style.css */
|
||||||
button {background-color: rgba(0,0,0,0); border-radius:2em;}
|
window {
|
||||||
|
background-image: url("/home/pi/mainsail/img/background.svg");
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background-color: rgba(0,0,0,0);
|
||||||
|
border-radius: 2em;
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user