CSS Breaking In IPython 3.0

[jackmaney]

First of all, thank you for your work in putting these themes together. Light themes (such as IPython's default theme) hurt my eyes.

I upgraded to IPython 3.0 today, and discovered that my menu bar is gone when calling ipython notebook --profile=solarized-dark (a partial screenshot of the top of one of my IPython notebooks):

I almost thought that this was an issue with IPython for a moment, but then I called ipython notebook, and the menu bar reappeared:

[jackmaney]

Okay, my apologies for missing the "What Happened To The Toolbar?" section of the README. After finding the relevant CSS file and commenting out the indicated line, I have my menu bar back.

However, there are other things that break: namely the areas outside of the cells still have the default IPython colors:

[nsonnad]

Hi @jackmaney, yeah I figured iPython 3.0 would probably break some things. I plan to migrate the styles over in the next week or two. Of course you're welcome to submit a PR, otherwise if you identify anything else that's broken just mention it in here and I should get around to it. Thanks!

[ymost]

+1

[cliffxuan]

+1

[drschwenk]

+1

[andyt-jana]

+1

[rakeshvar]

+1

[rakeshvar]

Adding these to the custom.css file has fixed the problem for me.

div#notebook {
    background-color: #111; 
}

div#notebook-container {
    background-color: #111; 
}

[ymost]

It works for me too - thanks @rakeshvar! However, there is still one small difference from the iPython 2 appearance. @jackmaney mentioned the menu bar issue above, but I think he missed a small point. Under iPython 2, the menu bar appeared event without commenting out anything in the css. Just the title bar above it and the button bar below it were hidden. Now in iPython 3, the three bars are all hidden. When commenting out the appropriate line in the css, it brings back all three of them. I would like to reproduce the appearance under iPython 2, where the title bar and the button bar are hidden, but the menu bar is not hidden. Can anyone help with this?

[lahvak]

Works for me too, except:

1. the menubar and toolbar, when enabled, are not styled.
2. when editing markdown cells, they are not styled

[k-dahl]

Here's my mods based on rakeshvar's:

div.navbar-brand {
    display: none !important;
}

.btn-group > .btn,
.form-control,
div#header,
div.navbar-collapse,
div#notebook-container,
div#notebook,
div#complete > select,
div#notification_notebook,
div#notification_kernel,
li > .dropdown-menu,
.dropdown-menu > li > a,
.dropdown-menu > li > a:focus {
    color: silver;
    background-color: #2b303b;
}

.dropdown-menu > li > a:hover {
    background-color: silver;
    color: #2b303b;
}

.edit_mode div.cell.selected {
    border-color: silver;
}

.dropdown,
.dropdown.open,
.dropdown-menu {
    color: silver;
    background-color: #2b303b;
    border: 1px silver;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > li > a:hover {
    color: silver;
    background-color: #2b303b;
}

Specifically for Ocean Dark. My CSS-fu is weak, so there may be a better way to do this - but it gets the job done so far.

Edit: Added a few other things. I can't get the markdown editing to work, but the rendered text should work.

[Carreau]

If I may, it would be I guess much easier for maintaining themes to use something like that that recompile IPython css using different set of variables. (+ custom CSS).

We would be happy to improve or css-building tools if needed or give you hooks to help.

We just don't have the bandwidth to maintain themes.

You would also be certain that you theme does override all style created by IPython.

[nsonnad]

As of 118a9ad367a3cc3c1534757db473b7329dd32249 there is a separate build process for iPython 3. One previous issue was that the ruby script used to compile the CSS was trapped in its own repository, so I've created a Makefile to build these within this repo.

The templates in ipython-3/templates will now compile into ipython-3/output. So far the templates are identical to those in ipython-2/templates but I should get around to editing them soon. Happy to accept a PR if anyone wants to take a crack at porting the styles over.

@Carreau: I assume you have colors defined somewhere to generate the CSS file? Or is it hand-written? If the themes are generated, you might consider directly using the colors from the base-16-builder YAML files (see here)

[Carreau]

The themes color are from codemirror directly, and we generate the rest of the css using less. I'm not even sure the codemirror themes are bundled in the minified css file.

I suppose you could make a PR to Codemirror to generate the colorscheme from a variable file.

I also don't understand why you absolutely want to re-write the css templates using yet-another template language, instead of proposing patches to IPtyhon in order to have that work directly with IPython .less files. It would be easier to maintain.

And also I believe that a few member of the IPython core team would be really happy to have some people interested in doing better design working a alternative css for the notebook. Who know if some themes are popular we could even have them on nbviewer.

[rgbkrk]

I love this theme so much.

[dunovank]

Here's a few of my jupyter themes - https://github.com/dunovank/jupyter-themes