diff --git a/docs/Theming.md b/docs/Theming.md index 35e9a588..15791dc3 100644 --- a/docs/Theming.md +++ b/docs/Theming.md @@ -1,47 +1,80 @@ # 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 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 +- The icon file name must match the exact printer name as configured in `KlipperScreen.conf`. +- Supported formats for icons are SVG or PNG. +Example: ```sh -cd ~/KlipperScreen/styles -mkdir -p mytheme/images -cd mytheme -cp ../z-bolt/images/* images/ -echo "window { background-color: red;}" > style.css +cp /path/to/printer_icon.svg ~/KlipperScreen/styles/printers/printer_name.svg 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 -window { background-image: url("/home/pi/mainsail/img/background.svg");} -button {background-color: rgba(0,0,0,0); border-radius:2em;} +/* style.css */ +window { + background-image: url("/home/pi/mainsail/img/background.svg"); +} + +button { + background-color: rgba(0,0,0,0); + border-radius: 2em; +} ``` ![Custom theme example with background](img/theming/theme_example.png) -