diff --git a/.gitbook/assets/mainsail-interface-settings-ui-settings.png b/.gitbook/assets/mainsail-interface-settings-ui-settings.png new file mode 100644 index 0000000..2f0f0aa Binary files /dev/null and b/.gitbook/assets/mainsail-interface-settings-ui-settings.png differ diff --git a/SUMMARY.md b/SUMMARY.md index 539c6ad..8ef9135 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -29,10 +29,12 @@ * [Presets](overview/features/presets.md) * [Print History and Statistics](overview/features/print-history-and-statistics.md) * [Query devices](overview/features/query-devices.md) - * [Themes](overview/features/themes/README.md) + * [Build-in Themes](overview/features/build-in-themes.md) + * [Custom Themes](overview/features/themes/README.md) * [Prepare](overview/features/themes/prepare.md) * [Backgrounds](overview/features/themes/backgrounds.md) * [Logos and Icons](overview/features/themes/logos-and-icons.md) + * [Custom Navigation](overview/features/themes/custom-navigation.md) * [Custom CSS](overview/features/themes/custom-css.md) * [Community Themes](overview/features/themes/themes.md) * [Thumbnails](overview/features/thumbnails.md) diff --git a/overview/features/build-in-themes.md b/overview/features/build-in-themes.md new file mode 100644 index 0000000..a0618b2 --- /dev/null +++ b/overview/features/build-in-themes.md @@ -0,0 +1,42 @@ +--- +description: >- + Build-in themes are pre-designed themes. They provide users with a quick and + easy way to customize the look and feel of their interface without having to + create a design from scratch. +--- + +# Build-in Themes + +In Mainsail, there are two groups that are permitted to have build-in themes. The first group consists of all vendor sponsors, who receive exclusive themes as a recognition of their support. The second group includes large open source communities. + +{% hint style="info" %} +If you are a maintainer of a large open-source 3d printing project, please contact the Mainsail crew on the Discord server for a build-in theme. +{% endhint %} + +### Change theme in Mainsail + +

Interface Settings > UI-Settings

+ +To change the Theme in Mainsail, open the `Interface Settings` (cogs-menu on the right top), switch to `UI-Settings` and select a theme in the dropdown. + +The following themes are currently available in Mainsail: + +* Mainsail (default theme) +* Klipper +* Voron Design +* VzBot +* BigTreeTech (Sponsor) +* LDO Motion (Sponsor) +* Multec GmbH (Sponsor) +* Prusa Research (Sponsor) +* YUMI (Sponsor) + +### Possible options in Build-in themes + +* Sidebar Logo (colorizeable in the UI-Settings) +* Primary Color +* Sidebar Background +* Main Background +* Custom CSS + +Most themes only change the sidebar logo and favicon with the logo and primary color. diff --git a/overview/features/themes/custom-navigation.md b/overview/features/themes/custom-navigation.md new file mode 100644 index 0000000..841ec8e --- /dev/null +++ b/overview/features/themes/custom-navigation.md @@ -0,0 +1,56 @@ +--- +description: >- + It is also possible to add additional navigation points via a custom theme. + You have to add a navi.json file with the following content. +--- + +# Custom Navigation + +```json +[ + { + "title":"Custom1", + "href":"https://www.google.com" + }, + { + "title":"Moonraker", + "href":"/server/info", + "target": "_blank", + "position": 90, + "icon": "M5 5H7V11H5V5M10 5H8V11H10V5M5 19H7V13H5V19M10 13H8V19H10V17H15V15H10V13M2 21H4V3H2V21M20 3V7H13V5H11V11H13V9H20V15H18V13H16V19H18V17H20V21H22V3H20Z" + } +] +``` + +### Options + +#### title: string (requirement) + +`title` is the name of the new navigation point. + +#### href: string (requirement) + +This is the path/url to link to. + +#### target: string + +With this option you can specify whether the link is opened in a new tab or in the same window. possible values here are `_self` and `_blank`. + +#### position: integer + +This value is used to sort the navigation. All normal navigation points are numbered in steps of 10 (Dashboard: 10, Webcam: 20, Console: 30, ... Machine: 90). Simply set a value in between to place the new navipoint between two default points. + +#### icon: string + +A custom icon can be added to the navigation point. This can be copied from the material design icons. To do this, open the page [https://pictogrammers.com/library/mdi/](https://pictogrammers.com/library/mdi/), open an icon and click on "copy SVG". All you need is the path. Hier the example from the `account` icon: + +```svg +// complete SVG + +account + + + +// what we need +M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z +``` diff --git a/overview/features/themes/logos-and-icons.md b/overview/features/themes/logos-and-icons.md index 7a25447..8ace252 100644 --- a/overview/features/themes/logos-and-icons.md +++ b/overview/features/themes/logos-and-icons.md @@ -19,6 +19,10 @@ For more information on creating and uploading to your `.theme` folder, please r ![](../../../.gitbook/assets/screenshot-sidebar-logo.png) +{% hint style="info" %} +If you use a SVG, you can use "var(--color-logo, #000000)" as fill color, to use the logo color from the interface settings. +{% endhint %} + ## Favicons Upload favicons into your .theme folder and name them `favicon-32x32.png` _(required)_ and `favicon-16x16.png` _(optional)_.