Finding CSS elements to change theme of ipython (juypter) notebooks

Question

My ipython version is 5.1.0 and jupyter's version is 4.2.1.

I changed the color theme and font type and font text by modifying the css following this guide: http://sherifsoliman.com/2016/01/11/theming-ipython-jupyter-notebook/

The steps I took were to:

Setup a configuration directory using the following command: jupyter notebook --generate-config
I changed directories to my config directory (~/.jupyter)
clone the github repo from here: https://github.com/cemoody/ipynb_base16_dark
I then deleted the custom.js file and then replaced the custom.css file with this css file (https://github.com/sheriferson/dotfiles/blob/master/jupyter/custom/custom.css).
I then copied the contents of step 3 & 4 into a folder in called custom in the config directory

I'm successful following these steps. What I do not understand in the custom.css file (https://github.com/sheriferson/dotfiles/blob/master/jupyter/custom/custom.css) are the cm-s-ipython commands:

.cm-s-ipython*

I do not understand where they come from and what I am allowed and not allowed to do. I've spent majority of today surfing for these answers and I cannot seem to find any reference. I only seem to find sample code.

I also don't understand where the div/spans elements are coming from either. Where are the html files that correspond to custom.css?

(It's also worth noting that I'm using Anaconda's distribution of Python 3.6. No modifications have been made to Anaconda excluding changing the custom.css file.)

Louise Davies · Accepted Answer · 2017-03-13 14:52:52Z

1

.cm-s-ipython* is referring to a CodeMirror element I would think. It is not a command but a selector. The . means it is selecting all elements of the class cm-s-ipython*. This CSS selector reference sheet is always useful: https://www.w3schools.com/cssref/css_selectors.asp

custom.css doesn't "correspond" to any html file - it can overwrite any of the css found in the notebook application. The easiest way to inspect the notebook's html to find out what selectors you need would to be to use the "Inspect Element" option available on most broswer right-click menus or to view the page's source code (again, usually found in a browser's right-click menu)

So find the html of the element(s) you want to edit, craft a selector that targets those html elements and put it in custom.css

answered Mar 13, 2017 at 14:52

Louise Davies

16.2k6 gold badges41 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Finding CSS elements to change theme of ipython (juypter) notebooks

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related