Birkbjo / OctoPrint-Themeify

Beautiful themes for OctoPrint
94 stars 35 forks source link

Remove text-shadow from .navbar-inner on Discorded theme #77

Open SC-JBG opened 4 years ago

SC-JBG commented 4 years ago

Just a suggestion to remove the text-shadow property on the Discorded theme for the navbar-inner div as it just looks off as it is right now.

I've done it now via customizations on the theme but I think everyone would benefit if it becomes standard.

BTW - amazing plugin and themes, I love my Octoprint looks like it does with the Discorded theme :)

SC-JBG commented 4 years ago

Hey,

Sure, no problem but it is a little bit of a quick’n’dirty workaround:

.navbar-inner .navbar-text { color: #fff } .navbar-inner .navbar-text { text-shadow: none }

navbar .navbar-inner .brand, #navbar .navbar-inner .nav>li>a { text-shadow: none }

That worked out for me and remove the text shadows effectively.

Hope that helps!

Best and take care, Jules

Can you let us know what you input into the selector to achieve this? Currently trying to figure out how to remove the shadow, and make it bigger and bold. Cheers.

mrwizerd commented 4 years ago

I have been trying to figure out how to get rid of this for WEEKS now...now i just need to figure out how to apply your settings....

OH figured it out

so I used .navbar-text - text-shadow - (skipped colour selector) - none Well pictures being worth a thousand words, I am attaching one below Screenshot_1

Now to figure out the user login and the tabs that are text not icons, I have the .fa-gamepad for instance but not the text like the timelaps or enclosure tabs. I wonder if there is a way to change the color of the text when it is selected vs not selected, the background changes and I have not figured that out either ... but I will do more digging. Your drop shadow fix was my BIGGEST annoyance to date. I could kiss you.... almost.

SC-JBG commented 4 years ago

Hey,

happy that my fix solves it for you as well :-)

Regarding your other topics I am not sure that I totally understand what you are trying to achieve. But the tabs with only a icon do not have text assigned to them, so you have to live with just the icon.

And for the active/inactive color. For me the tab link color is changing to white on the selected tab and you should have the same behaviour. Without testing it I think you could override the text-color for inactive and active tabs with the following CSS-selectors:

.nav-tabs>li>a {color: YOURCOLOR} .nav-tabs>li.active>a {color: YOURCOLOR}

Regarding the Login screen, that one is still white/blue as it is rendered before the Themify-Plugin gets applied, I think you cannot change anything here.

Hope that helps.

Best, Jules

mrwizerd commented 4 years ago

Hey Jules,

Actually the Icons are considered a text at least to some degree. MOST of the icons are listed as .fa-controller for instance. I have changed the colours of them fairly easily. Screenshot_8 I am goign to try your solution to nav-tabs. I know that I can change their color if I change the .active it looks like its possible to get more specific if I am reading what you wrote there correctly. My attempt based on that will be .nav-tabs>li>a in the first column, color in the second, then my color choice. I have been able to do some other things like increase the section titles font size and weight as well as colour so that they stand out more Screenshot_9 The one thing that would be nice though is an ability to export and import all these settings, because once I am done with this one, I have to transcribe it too all other printers. Which is not terribly hard but it is a lot of copy and pasting. An export/import function would be awesome. If I knew how to code I would do it my self as a fork, but I am just not that skilled.

With all that said however, If your solution works, I THINK I will have a better understanding of how I can find more things with the inspect command. Your help has been invaluable in getting this far, thank you again

Yours Michael

Edit: The first one enabled the change of the rest of the text on the tab menu, the active one did not function correctly, I will do some more digging into the inspect to see what I can find.

mrwizerd commented 4 years ago

So I have gotten a large amount of my interface customized but I was trying to modify the sliders for feed and flow, I got the main colour changed but the slider and the right side are using a gradient fill image that has two colour tags but I don't know how to address them to change them. Here I have changed them in the inspection tab so they are highlighted.

Screenshot_1

any thoughts?