How can I make Octoprint's interface in my browser "bigger"

#1

Is there a way to make Octoprint's interface in Chrome bigger, to make it use the full width of my screen ?

See this image to understand what I mean https://imgur.com/kGTVehk

#2

Not without re-writing your own interface via plugin and the UIPlugin mixin. You may be able to tweak some stuff with Themeify Plugin, but I don't think I've seen anyone do this yet. @OutsourcedGuru is one of the guys that has worked with that plugin a lot, so he might know.

1 Like
#3

Thanks for the answer, I thought it was something simple. I guess I'll just use the browser's zooming feature.

#4

It's easy with Themeify, as suggested. You're looking for .span8 and .container. Set them to numbers you find pleasing on your resolution.

I'm also using it to set the temperature graph's background image to a second Pi mjpg-streamer here as seen from a bird's eye view. And I'm styling the custom buttons I added to the bottom of the Control tab so that the page doesn't "go long".

I'm running a fork of Themify, not that it matters.

2 Likes
#5

Thank you ! This is exactly what I was looking for, I'll give it try tonight.

1 Like
#6

Me too :+1: Thank you!

#7

I can't get it change size? am i missing something?

#8

You may have to press Crtl F5 to clear the cache...

#9

problem solved I had "Width" instead of "width"

2 Likes
#10

Hi,

Thank you for this.

I am completely new to Octoprint and am trying to get Ocotoprint's interface bigger in a browser.
Where do I set up the settings from your 2nd screenshot?
I can't seem to see a similar screen on my stock setup.
These are what my settings look like.

Thanks in advance.

#11

Hi @dartec!

They are set in Custom Style. You may have to play a bit with the values to fit your needs.

1 Like
#12

Thank you @Ewald_Ikemann

It looks like I came right.
I will play around with it.

1 Like
#13

Thanks for the sharing

#14

You would need to add the two lines for:

  • .span8
  • .container

You will find this by clicking the Advanced link that is in Themeify's Settings page.

#15

The Themeify Plugin is absolutely great! And for those of you looking to max out on the functionality, I've come across a sweet way to access all the possible containers to edit.

I use Chrome for all my browsing and it has a nice feature; the console. Press F12 on any page to bring it up and under the Elements tab, you can freely browse all of the elements of the page you're viewing. Hovering over each "<div " highlights the corresponding area on the page so you know exactly which div is for which part of the page. Following down the hierarchy will lead you to the place you want to edit.

For me, I wanted to make the list of "Files" be longer so that I could see more of them at once. For this, I added the following two styles:

.slimScrollDiv | height | 750px
.gcode_files | height | 750px

Hope this little gem helps some of you out there.