CODEWITHSUNDEEP
pythoncssipythonjupyter-notebookjupyter
user3667623
user3667623

Reputation: 69

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

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:

  1. Setup a configuration directory using the following command: jupyter notebook --generate-config
  2. I changed directories to my config directory (~/.jupyter)
  3. clone the github repo from here: https://github.com/cemoody/ipynb_base16_dark
  4. 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).
  5. 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.)

Upvotes: 1

Views: 856

Answers (1)

Louise Davies
Louise Davies

Reputation: 16001

.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

Upvotes: 1

Related Questions