OctoPrint widescreen layout

OctoPrint is a great tool to control your 3D printer. The default layout was quite narrow however, especially on typical widescreen monitors.

An another user over at the OctoPrint forums also shared their config, but here is mine.

Install Themify plugin

We’ll need to install the Themify plugin which will let us customize the CSS for the OcotPrint page. Head over to Settings then Plugin Manager and ‘Get More’

Search for the plugin called Themify, then click Install.

Set theme

This step is up to everyone’s personal preference, but for me the Discorded theme was the most appealing starting point. You can set that under the new Themify settings pane:

Advanced options

And now the important bit – under the same Themify settings pane, expand the Advanced options section and set it up like the below:

You should already see the changes taking effect live as you edit them. The .container and .span8 handle most of the wide-screen stuff, but i fould a few more places where tweaking was required.

Custom Tab-icons

If you also use a Dashboard plugin, then it might come handy to know, that you can set up custom icons for your custom plugins so the Dashboard plugin can pick those up and display them instead of a default icon. Your mileage will definitely vary on this, depending on what other plugins you use (or even have the Dashboard plugin in the first place), but just for reference, here is my current config:

The icons are from here: https://fontawesome.com/v4.7.0/icons/

But keep in mind that you need to put “fa fa-” prefix in front of the icon names – the preview should confirm what it was picked up as expected.