Pimp my web interface

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:

image
The ones that are cut off say this:

.octoprint-container

.row-fluid.print-control

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

Hello,

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:

  multicam:
    _config_version: 1
    multicam_profiles:
    - URL: http://192.168.1.30/cam1/?action=stream
      isButtonEnabled: false
      name: Przód
    - URL: http://192.168.1.30/cam2/?action=stream
      isButtonEnabled: true
      name: Tył
    - URL: http://192.168.1.30/cam3/?action=stream
      isButtonEnabled: true
      name: X-End
    - URL: stream
      isButtonEnabled: true
      name: Extruder
    - URL: http://192.168.1.30/cam4/?action=stream
      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.

Hello,
can everybody help me to correct the Prusa Leveling Guide after interface scale?

greetings
Heiko

Hello everyone

I used some good tweaks from this page. Thank you.

I'm trying to remove bottom footer. And note under files section " Hint: You can also drag and drop files on this page to upload them."

I tried several thing but no success. Is there any suggestion ?

The width of the graph is hard-coded in the plugin itself, you'll not accomplish that with themify.

I edited the python myself but that means on next update it is lost

1 Like

how do you get the button "print" so wide? found it

Check out my octoprint blog post. I believe I documented it there in detail.

Hello, to edit the CSS directly can also be written in this file:
venv\Lib\site-packages\octoprint\static\css\octoprint.css
Unfortunately I do not know if this file will be overwritten during an update. But you could write a small script that adds the custom CSS again.

As an example, I arranged the sidebar as a grid on large screens so as not to roll too much

@media only screen and (min-width: 1300px) {
    .octoprint-container {
        margin-top: 20px;
        width: 100%;
    }
    #sidebar {
        width: 50% !important;
        display: flex !important;
        flex-direction: row-reverse;
        flex-wrap: wrap !important;
    }
    .accordion-group {
        width: 48% !important;
        margin-left: auto;
        margin-right: auto;
    }
}

Yes, it will be overwritten by an update. I'm somewhat sure that there is a octoprint.less file in that same subdirectory which is compiled into octoprint.css but I'm not sure what events could trigger that (overwriting your edit).

You can write a simple plugin which has a stylesheet and overwrites the style as you've trying to do. This attempt shouldn't be overwritten by updates of OP.

For example, the OctoFlat-Plugin do it this way ...

1 Like

THANK YOU!! I just posted in the Help forum asking how to do this about an hour ago, but kept searching and found this. Made the two changes you mentioned and the container did indeed resized, but the actual list of files inside and the scroll bar for them, did not. So it was the same size, just in a longer panel...meaning a bunch of blank space below it.

So I too opened the source for the page and found a section for the scroll-wrapper in this division and added a third line:

.scroll-wrapper height 750px

This fixed it!!! Never would have figured this out w/o finding this thread however!!