Hello, im new to octoprint and i was trying to resize my UI, i have been able to remove the margins but items like temperature graph stay the same size. Do i need additional code to fill the rest of the screen?
I've so far only added
.span8, width, 100%
.container, width, 100%
form.custom_container, display, inline-block
form.custom)container, padding-right, 10px
What I do in a case like this is right-mouse click on the part of the screen I'd like to change and then select Inspect Element from the context popup menu in my browser. I then click different parts of the HTML text in the bottom there and watch as things are highlighted back in the HTML page itself. I'll then eventually find the margin, identify which DIV tag by class or ID is involved and then try to change something.
If it's a class, as in <div id="something" class="somethingelse"></div> then you want to use .somethingelse as the selector. If it's an ID, then you want to use #something for the selector. The ID is almost always a safer option.
Anyone know how to change font size and centre / position the temps and other text in the nav bar?
Thanks.
I think you're looking to adjust the float css setting for the selector ul.nav.pull-right. If you make it none it will push all the way to the left next to the logo. Or adjust the margin-right setting to push it over to where you want it.
Thanks. Could you specify for me which is the selector and which is the css rule. I'm a little new to this.
I've tried a few variations but they didnt work probly just my ineptitude. 
also trying to get this working
#temperature-graph background (http://picam1.local:8080/?action=stream)) no-repeat center
think im inputting the wrong value mine is a pi v2.1 cam, tried a few different things but none work for me. including custom background plugin. 
Thanks in advance
ul.nav.pull-right is the css selector, margin-right would be the rule/attribute you're trying to set.
My plugin only supports images, not video stream. My best guess is that your value you are setting for the address is wrong. Use the same thing that you have set in your webcam settings and make sure there is only one closing parenthesis, Rule: background-image Value: url(http://<ip of your pi>:8080/?action=stream) no-repeat center
Or use my other plugin for this purpose....
Thanks very much for you help.
I've tried alot of different combo to get the cam working. Do I need to include everything below starting with url or just inside () starting http.
url(http://:8080/?action=stream) no-repeat center.
I found the ip for the webcam section of the settings.
The following should work, assuming you are using an unmodified octopi image...
| Selector | CSS-Rule | Value |
|---|---|---|
| #temperature-graph | background-image | url("/webcam/?action=stream") |
And this is the reference for how this works...
I actually use that technique when I've added a second webcam server to my printer.
Just tested this one again, didin't work, wonder if temps graph plugin affects this as I've recently installed that. I was testing previously with out it installed tho.
Using sidebar cam which is great, its not that i have to get the cam in temps working its more knowing i can if you know what i mean.
Been experimenting with something else too, tryin to edit the size of the graph in themify
Yes, the temps graph plugin does break this ability to set the background.
Ok thanks so I will test without that enabled.
Thats the answer for me. it works!!
must have enabled temps graph plugin before trying to a cam behind temps graph,
Without that plugin its fine.
Thanks
Trying out a new conundrum.
Attempting to enlarge the Nav bar.
Anyone know which parameters to adjust in Themeify, primarily looking to make the text bigger and easier to read at a glance.
Okay! I've got my OctoPrint UI set up the way I want it.... or at least almost. Now that I have made it all nice and wide, the narrow settings window is bugging me. I've messed around with it, but it seems that some positioning stuff is inline hard coded.
If someone wants to take a stab at it, I'd be grateful.
Should be #settings_dialog and the current width on mine is 975px with a margin-left of -487px (half of the width).
Has anyone managed to figure out the CSS for the TempGraph plugin to make it expand with .container and .span8? When I modify those elements, my graph doesn't expand.
Here are my settings. Mine takes up the whole width:
The ones that are cut off say this:
.octoprint-container
.row-fluid.print-control
.navbar-inner > .container
