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

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

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.

4 Likes

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

1 Like

Me too :+1: Thank you!

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

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

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

2 Likes

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.

Hi @dartec!

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

1 Like

Thank you @Ewald_Ikemann

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

1 Like

Thanks for the sharing

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.

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.

1 Like

I added ".scroll-wrapper | height | 750px" and it seems to work.

This is great.
Is there any way to use the original labels (words) instead of icons in the tabbed nav on top of the graph?

There's options in themeify for icons, I think you just turn them off.

I unchecked the box under "Action" but it didn't change anything at all.

Maybe a screenshot would help me understand what the issue is you're explaining and your themeify settings. Might be able to provide more assistance. Also forcing a refresh of your browser wouldn't hurt (shift+f5 in chrome while on the page).

Thanks, I just needed to refresh the page. I disabled the icons, refreshed and now the words instead of icons appear.

This could also help:


Thx, @jneilliii for developing this plugin :wink:
1 Like