LogoLogo
MainsailMainsailOSCrowsnest
  • Welcome to Mainsail
  • Setup
    • Installation
      • MainsailOS
      • KIAUH
      • Docker
      • Manual setup
      • my.mainsail.xyz
    • Updates
      • Update Manager
      • Manual Update
    • Configuration
  • overview
    • Features
      • Bed Mesh
      • Console
      • Dashboard Organisation
      • Exclude Objects
      • Hide macros, outputs or fans
      • Localization
      • Macro Management
      • Macro Prompts
      • Presets
      • Print History and Statistics
      • Query devices
      • Built-in Themes
      • Custom Themes
        • Prepare
        • Backgrounds
        • Logos and Icons
        • Custom Navigation
        • Custom CSS
        • Community Themes
      • Thumbnails
      • Webcam
    • Settings
      • General
      • Console
      • Control
      • Dashboard
      • Editor
      • G-Code Viewer
      • Macros
      • Presets
      • Printers
      • UI-Settings
      • Webcams
    • Slicer
      • Cura
      • Ideamaker
      • PrusaSlicer
      • SuperSlicer
    • Quicktips
      • Slicer upload
      • Remote Access
      • Printer power switch
      • Additional Sensors
      • Disable Octoprint LCD menu
      • config.json
  • FAQ
    • Mainsail
    • Klipper warnings
      • Deprecated Values
      • Deprecated Options
      • Runtime Warning
    • Moonraker warnings
      • PolicyKit Permissions
    • Klipper errors
      • MCU Protocol error
    • Mainsail errors
      • Unauthorized
    • Getting Help
      • Discord
      • GitHub Discussions
  • About
    • Data Privacy
    • Sponsors
    • Development
      • Code standards
      • Contribute
      • Environment
      • Localization
    • Credits
  • 🔗Links
    • Github
    • Release Notes
    • Discord
    • Youtube
Powered by GitBook
On this page
  • Preparing your custom theme
  • .theme folder
  • Directory structure

Was this helpful?

Edit on GitHub
  1. overview
  2. Features
  3. Custom Themes

Prepare

Create a basic folder structure to build your own theme.

PreviousCustom ThemesNextBackgrounds

Last updated 2 years ago

Was this helpful?

Preparing your custom theme

.theme folder

You can use Mainsail’s built-in file manager (Settings > Machine) to create the .theme folder. Upload the files to this folder and edit your CSS files.

The dot in the folder name means that it is a hidden folder. You will need to activate “Show Hidden Files” in Mainsail’s file manager.

Directory structure

The below directory and file structure provides an overview of files you could include. All listed files in the .theme folder are optional and will only be loaded if they are provided.

+-- ..
|-- klipper_config
|   |-- .theme
|   |   |-- sidebar-logo.svg|jpg|png|gif
|   |   |-- sidebar-background.svg|jpg|png|gif
|   |   |-- main-background.svg|jpg|png|gif
|   |   |-- favicon-16x16.png
|   |   |-- favicon-32x32.png
|   |   |-- custom.css
|   |   |-- ...