ipython notebook toolbar customize

Question

I want to add a new toolbar button on ipython notebook. I got a good link mentioned this.

So I create a new file: ~/.ipython/profile_default/static/custom/custom.js with below content

    $([IPython.events]).on('notebook_loaded.Notebook', function(){
    IPython.toolbar.add_buttons_group([
        {
             'label'   : 'run qtconsole',
             'icon'    : 'ui-icon-calculator', // select your icon from http://jqueryui.com/themeroller/
             'callback': function(){IPython.notebook.kernel.execute('%qtconsole')}
        }
        // add more button here if needed.
        ]);
    });

The restart ipython notebook and load the ipython document. I can see one button at the right of the toolbar.

This issue is the icon seems not displayed correctly.

But I guess it should looks like ui-icon-calculator.

The ui-icon-calculator can be found at themeroller but I am not sure if I need to download it to local disk.

score 3 · Accepted Answer · answered Nov 30 '13 at 00:59

3

That doc is out of date. jquery-ui icons are no longer available, instead use one from FontAwesome with IPython >= 1.0. See this file for an example custom.js with IPython 1.x.

answered Nov 30 '13 at 00:59

minrk

37,545
9
92
87

score 3 · Answer 2 · edited Apr 24 '15 at 17:48

3

If you want to:

Display Menu only when open a ipython notebook.
Add a Menu to hide/unhide input cells.
Disable the in/out prompt each cell.

you can following below steps:

Change custom.css to disable the in/out cell prompt

 ~/.ipython/profile_default/static/custom/custom.css

Add below content:

.prompt{
    display: None;
}

Change custom.js to disable toolbar & header line by default.

 ~/.ipython/profile_default/static/custom/custom.js

Content as below:

code_show=true;
function code_toggle() {
 if (code_show){
     $('div.input').hide();
 } else {
     $('div.input').show();
 }
 code_show = !code_show
}
$([IPython.events]).on('app_initialized.NotebookApp', function(){
    $("#view_menu").append("<li id=\"toggle_input\" title=\"Show/Hide Inputs\"><a href=\"javascript:code_toggle()\">Toggle Inputs</a></li>")
    $('div#header').show()
    $('div#maintoolbar').hide()
    $('div#ipython_notebook').hide()
    $('span#save_widget').hide()
    $('span#kernel_logo_widget').hide()
});

Restart your notebook server to take effect.

edited Apr 24 '15 at 17:48

Matt

27,170
6
80
74

answered Apr 24 '15 at 15:09

Sometimes it seems doesn't take effect. I am using Firefox. from the log, custom.js and custom.css loaded successfully. – lucky1928 Apr 25 '15 at 22:30
@lucky1928 I encounter such issue before. it's broswer's bug I think. After clean cache, it works fine now. – Apr 25 '15 at 22:31
How can you toggle the header after implementing this (mainly to rename the notebook)? It stays hidden even when I toggle it on. – tmthyjames Jun 02 '15 at 04:42
@tmthyjames You need to restart notebook server to try. – Jun 02 '15 at 17:03
@Beatlej Nope. Still doesn't work. It loads exactly the way I want it to, but won't show me the header when I toggle. However, it will show the toolbar when I toggle it. Regardless, this is much preferred (for me) than having both show by default. – tmthyjames Jun 02 '15 at 17:29

ipython notebook toolbar customize

2 Answers2

Linked