Julia notebook custom css

Question

Is it possible to customize the cell colours and notebook output such as dataframes in IJulia notebook (using julia). For example, in python, we could do

Python notebook

from IPython.core.display import HTML
css = open('style.css').read() 
HTML('<style>{}</style>'.format(css))

style.css

table.dataframe th:not(:empty) {
    background-color: #FFCCFF;
    text-align:left;
    font-weight: bold;
    font-family: monospace;
}
table.dataframe tr:nth-child(2) th:empty {
    border-left: none;
    border-right: 1px dashed #888;
}
table.dataframe td {
    border: 2px solid #ccf;
    background-color: #f4f4ff;
}

score 2 · Answer 1 · edited May 23 '17 at 11:51

2

From looking at the IJulia source, it doesn't seem like there's a method for updating the styles from within the package directly.

The simplest way to customize the IJulia CSS – assuming you're using jupyter 0.4 – would be to add your customizations to ~/.jupyter/custom/custom.css. If the directory does not exist, just create it, and your custom styles should load automagically.

Sourced from: How do I set custom CSS for my IPython/IHaskell/Jupyter Notebook?

edited May 23 '17 at 11:51

Community

1
1

answered Oct 26 '15 at 15:03

ntdef

484
5
13

@AtomicScience what version of jupyter are you using? Also, try setting the custom css here as well: `~/.ipython/profile_default/static/custom/custom.css` – ntdef Oct 26 '15 at 22:14
Jupyter 4.0.6. Inspecting the webpage source shows a custom/ custom.css file. But the file contents are `/* Placeholder for custom user CSS mainly to be overridden in profile/static/custom/custom.css This will always be an empty file in IPython */`. Adding a custom.css file in that location also didn't help. – AtomicScience Oct 26 '15 at 23:13
Hmm. Clearly from the message that's the location where Jupyter/IPython wants you to put the custom CSS. If it's not loading, I would probably [raise an issue](https://github.com/jupyter/notebook/issues) at the jupyter project -- they could probably help you out with your specific issue. – ntdef Oct 28 '15 at 00:50

score 1 · Accepted Answer · answered Oct 28 '15 at 22:22

1

This seem to work

file = open("styletableJul.css")
styl = readall(file)
HTML("$styl")

answered Oct 28 '15 at 22:22

AtomicScience

151
2
10

1

Julia DataFrames package has css class `data-frame` instead of `dataframe` – AtomicScience Oct 28 '15 at 22:25

score 0 · Answer 3 · answered Oct 28 '15 at 14:05

Jupyter permits rendering output with Javascript code in it. Using Javascript you can really play with the DOM (browser page representation) and achieve a different look. My mini-test example was:

In[356]: HTML("<script>tt = \$(\".output_prompt\"); tt[tt.length-1].style.color=\"green\"</script><em>hello</em>")

The result was:

Out[356]: hello

but with a green Out[356] (it has the output_prompt class). Getting the JavaScript code to change the styles might be annoying. It might also be possible to really include CSS style sheet programmatically using Javascript. You already have some default libraries loaded to help you (JQuery) - but I'm afraid I'm no Jupyter expert.

Though the solution seem to work, realised a simpler way of using css from @user3580870 approach. Thanks. — AtomicScience, Oct 28 '15 at 22:14
Can you share this way with us? Chances are me or someone else would need to do this sometime. — Dan Getz, Oct 28 '15 at 22:24

Julia notebook custom css

3 Answers3