Quickly add custom CSS to modify your OctoPrint UI.

Add your CSS by navigating to Settings -> Plugins -> Custom CSS.

Originally developed to fix an issue with overly large thumbnails on mobile when using PrusaSlicer Thumbnails and TouchUI together.


PrusaSlicer Thumbnails + TouchUI CSS Fixes

/* Fix PrusaSlicer Thumbnails size when using TouchUI  */
@media (max-width: 980px) {
  #touch .inline_prusa_thumbnail {
    max-width: 140px;
    margin-right: 10px;
    float: left;
  }
}

/* Optional: Make the file list taller (reccomended by PrusaSlicer Thumbnails)  */
#files > div > div.gcode_files > div.scroll-wrapper {
  min-height: 800px !important;
}