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
  • Customizing the CSS
  • Finding the Element to Customize

Was this helpful?

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

Custom CSS

PreviousCustom NavigationNextCommunity Themes

Last updated 2 years ago

Was this helpful?

The custom.css file allows you to customize the appearance of Mainsail without the need of rebuilding it. Place a file named custom.css in the .theme folder of your Mainsail installation and define your custom Cascading Style Sheets (CSS) rules inside the file.

Customizing the CSS

Finding the Element to Customize

You will need to use your browser’s built in developer tools to find the element you want to customize. You can do this by clicking the “Developer Tools” button in the browser’s toolbar or by right clicking on the page and choosing Inspect Element or press F12.

  1. Activate the developer tools and inspector

  2. Select the desired element

  3. Find the selector

  4. Use the style editor to customize the element. Play around to find the style you like!

When you have achieved your desired appearance, copy the full “section”, including the selector and curly braces.

Next copy it inside the “custom.css” file (you can keep everything or only what you have added)

You need to be familiar with the CSS syntax to customize Mainsail. There are many resources available to learn CSS online, for example:

NOTE: After saving, your browser may need a uncached reload to show the change. Visit

W3Schools - CSS tutorial
Wikipedia to learn how.