Added fa-lg after the fontawesome names, like it 
Also found a cheat sheet for fontawesome 4
https://fontawesome.bootstrapcheatsheets.com
1 Like
Is the overflow moving items to the dropdown to the right supposed to do like this even when lots of free space? I guess it's counting letters or number of tabs and not knowing about the narrow icons?
EDIT:
Ah! You already posted a solution to that! Nice!
It still doesn't show the icon for that last one though.... poking around now..
added
#gcode-canvas width 820px
3 Likes
Check out the Black Pearl theme that I have on mine. I upgraded the octopus and tentacle. There are times when I run a dedicated webcam server and just drop the output of that behind the temperature graph; that also works out nicely.
having the cam there sounds brilliant!
So I'll post here my GUI modificacions and improvements. Thanks for all your work.
Selector CSS-Rule Value Info
.container width 100% Adapt to any screen size
.span8 width 72% Approx. to fit the remaining space
*Corrected Dropdown to stay in the nav bar
#navbar_plugin_m33fio position inherit
#navbar_plugin_m33fio height 20px
#navbar_plugin_m33fio margin-left 30px
*Reduce space below navbar (I dunno if that space is reserved for something)
#navbar margin-bottom 0px
pd: One day I'll learn how to do all that fancy tables and formatting.
2 Likes
Try:
| Selector | CSS-Rule | Value | Info |
|---|---|---|---|
| .container | width | 100% | Adapt to any screen |
etc
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:
| Selector | CSS-Rule | Value | Info |
|---|---|---|---|
| .slimScrollDiv | height | 750px | Use the same px for both |
| .gcode_files | height | 750px | Use the same px for both |
Hope this little gem helps some of you out there.
3 Likes
Good suggestion.
There are also times when I visually remove a widget from a web interface by making its height 0px.
Is there any way possible to move the files section under the temp,control.... box? or at least make the files box wider where it is and relocate the State and Connection info.
Hello everyone. I am just getting started with Octoprint, and I was FINALLY able to get my settings just right so that I can make everything take up the full width of the screen on a desktop, and still have it be usable on mobile.
That said, I want to be able to make it be more than just usable, and have it look nice on mobile. However, I think that the CSS trick that I need to be able to use is:
@media only screen and (max-width: 600px) {
*Add Mobile Specific CSS code here*
}
How do I get that code into OctoPrint? I tried editing the Themify '.less' files but that doesn't appear to do anything.
I'm basically just trying to make it look like the screen squish plugin on mobile(and maybe hide some panels). And have it be wide on desktop.
Any help here would be appreciated.
Hi @simpat1zq!
If you want to use OctoPrint with your mobile, there is a plugin you should have a look on:
TouchUI
Thanks. I had already tried that one. I might try it again, but I just didn't like it much.
EDIT: It is better than the regular interface on mobile, but I think the main thing I want is for the webcam stream and the controls to be on the same screen.
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. 