nebelgrau/MichalHelp needed: I want to customize #jupyterhub a little bit, the login page, etc. I got some of it done, thanks to the explanations here: https://professorkazarinoff.github.io/jupyterhub-engr114/login_page/ and some other instructions. So I got the colors, and the layout, and added the logo I need. But I also want to change the font, and I'm quite confused about "where". JH uses #boostrap 3.4.1, so my question is: should I add a font there (in the Bootstrap "components" folder, and tinker with #less/#css files, or there's some other way?
So basically the question is: how do I use a font of my choice in a #bootstrap 3.4 template :)
Min RK@nebelgrau77 Changing font-family's not too hard. You can add any custom CSS to your `page.html` template. If you want to modify the bootstrap theme in more detail, you'll want to _recompile_ style.min.css from the LESS source. Example with more detail: https://gist.github.com/minrk/1550a7e270f5f3fb6bfe11ba2b303606
@minrk Great, that's what I'm looking for (the modification from the page.html, not recompiling bootstrap :D). I'll try that!
@minrk Great, that worked, thanks!! And it's pretty straightforward, without messing with the Bootstrap files. Now I need to figure out another small thing: how to change the color of the highlight in the spawner menu. I took a screenshot to get the exact value, but this light blue is not defined anywhere, seemingly. At least not explicitly :O
@nebelgrau77 If I know what you're referring to, that's from bootstrap's focus css, and usually browser-specific: https://github.com/twbs/bootstrap/blob/v3.4.1/less/mixins/tab-focus.less . You can override it with `input[kind]:focus` CSS, specifically `outline`.
@minrk Great! So that blue color that I can't find would be something coming directly from Chrome? But I can override it in my style.css? Or it has to be done in the page.html, too?
@nebelgrau77 Yeah. I think browsers differ in how customizable focus is, but you can at least add any _additional_ CSS to the :focus selector. The default uses the CSS variable -webkit-focus-ring-color, which is defined by the browser and I _think_, ultimately by the platform. You can try just changing this CSS variable and see what happens.
@minrk Thanks again! I get what you mean, I just need to find the right element (I already know that input focus background will change the color of the fields for username and password 馃榾 ).
@minrk OK, so I'm trying this again, and it's pretty frustrating... Basically:
select:focus{
background-color: red;
}
will make the whole dropdown menu red when I click on it. But I can't find the attribute (is that what it's called?) that would change that light blue color of the currently highlighted option. select:hover changes the actual menu when I hover the mouse over it. And it's not select:focus-within, so I just have no clue how to change that thing :O
select:focus{
background-color: red;
}
will make the whole dropdown menu red when I click on it. But I can't find the attribute (is that what it's called?) that would change that light blue color of the currently highlighted option. select:hover changes the actual menu when I hover the mouse over it. And it's not select:focus-within, so I just have no clue how to change that thing :O
@nebelgrau77 I think you want to set box-shadow, outline-color, and border-color, like we do for the login form: https://github.com/jupyterhub/jupyterhub/blob/336d7cfcfaf74087e4ee467d5e3d3bec0c25c3d0/share/jupyterhub/static/less/login.less#L34-L39
@minrk close, but that's not it, either :/ what it does is modify the basic menu box before it opens. but it does not impact the actual list of options. I think I saw something about disabling those default webkit settings, need to find it...
@minrk OK, so:
option:checked {background-color: red}
will change the option of the menu I click on to red. so that could be close to what I want, but it's not the exact thing. I want the highlighted item to have some custom color. It's neither hover nor active.
@minrk also: it's definitely some browser setting, because the highlighted menu item is blue in Chrome, but gray in MSEdge. I need to find out how to disable this default setting/override it, and what it actually is.
@nebelgrau77 i think some level of keyboard focus highlighting may not actually be overrideable in all browsers.
@minrk Yeah, I guess I'll give up on that one :)