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.
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.
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.
