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

Get Help
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.

Themeify%20settings
Themeify settings.PNG697×712 20.4 KB

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.

Screen Shot 2018-07-15 at 11.41.58 AM.png734×253 20.4 KB

2 Likes
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.

2 Likes
16

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

17

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?

18

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

19

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

20

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).

21

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

22

This could also help:


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

Here was my solution.
I used the custom css plugin:

Along with the following css which should work on most modern browsers:

.octoprint-container.container {
  width: 95%;
}

.octoprint-container .row {
  display: flex;
  flex-direction: row;
}

.octoprint-container .row .span8 {
  flex-grow: 2;
}
1 Like
24

Hello everyone.

Sorry for the necro post, but my favorite Themeify settings for a 1080p screen are these:
image

These nicely fill the screen in a much comfortable mode, especially on the upload list.

Cheers!