Pimp my web interface

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

2020-01-03 12_25_37-OctoPrint

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.


1 Like

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:



.navbar-inner > .container

1 Like

Somewhere in a parallel universe the borders of Spain just increased by 20%.

I have it almost exactly as you do, but it still didn't change the graph when using the TempsGraph plugin

Sorry. That was my fault. I totally missed when you said you were using that plugin. I’m not sure about what needs to change.


I'm trying to do some stuff with the help of Themeify.
I've reached a point that I don't know if it's even possible to do what I want.

Both screenshots have a contour on the things that I'd like to move.

This is what I have now:

And I'd like to reorganize it a bit more to look like this:

The Head and Bed button groups are added using Custom Control Editor plugin.
The Webcams button group is from Multicam plugin.

This is what I currently have in my Themeify setup that is regarding this:

#control-jog-custom   clear           none
#control-jog-custom   display         inline-flex
.custom_section       padding-right   15px

This is allready over my very basic knowledge of css.
Maybe someone that has a bit more experience will be able to help me.

You might go into the ~/.octoprint/config.yaml in the control section and see if Webcams is represented. It might be as easy as replacing the word "vertical" with "horizontal" in that case.

You might also see if you can simply reorder the list items in that same section (assuming that they're there).

Good tip - I haven't done any mods to my OP install for so long I forgot that file exists :stuck_out_tongue_winking_eye:
Unfortunatelly the multicam entry only contains this:

    _config_version: 1
    - URL:
      isButtonEnabled: false
      name: Przód
    - URL:
      isButtonEnabled: true
      name: Tył
    - URL:
      isButtonEnabled: true
      name: X-End
    - URL: stream
      isButtonEnabled: true
      name: Extruder
    - URL:
      isButtonEnabled: true
      name: Filament

Also about my need to reorder things. Turns out that making the multicam button group horizontal is the only thing that I'll be changing. After some tests I'm moving the Head and Bed button groups back down.