Removing grey bars from the jupyter notebook

[bishop_gate]

Hi,

How do I remove the grey bars next to my jupyter notebooks as they are taking up valuable real estate on the web page?

thanks

[Roberto Alsina]

You would have to create some CSS rule and add it to your custom.css

--
You received this message because you are subscribed to the Google Groups "nikola-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to nikola-discus...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[bishop_gate]

thanks i'll try that

[John Drake]

Has anyone have any success with this?

I don't really know css but would love to know how to make that grey box disappear.

Using a custom bootswatch theme (Yeti) with my webpage.

Thank you!

[Jim Schmitz]

I haven't removed the gray bars but I have made other customizations to Jupyter notebooks with Nikola. What you want to do involves Jupyter's nbconvert utility, not Nikola.

Looking at the nbconvert project on Github, I see some things changed with templating within the past month or so. Still, the following is probably still accurate.

The nbconvert utility uses Jinja templates to convert the notebook's JSON file to HTML. (or to LaTeX, for a PDF). You can customize those templates to do whatever you want. Once you create your custom template, you'll need to instruct Nikola to use it.

In my conf.py file I have this:

IPYNB_CONFIG = {'Exporter': {'template_file': 'ipynb_themes/alt_basic.tpl'}}

In that tpl file I have this:

{% extends 'basic.tpl' %}

{% block data_png scoped %}
<div class="output_png output_subarea {{ extra_class }}">
{%- if 'image/png' in output.metadata.get('filenames', {}) %}
....etc

The basic.tpl template converts a Jupyter notebook to an HTML fragment that can be placed into a Nikola page or post. By default, Nikola uses Jupyter's basic.tpl template file, but I wanted to override a few things for how it handled images.

It would be helpful to you to find Jupyter's basic.tpl file. You'll need to find where the gray bar comes from and override that block.

It used to be here:

https://github.com/jupyter/nbconvert/tree/master/nbconvert/templates 

But they refactored it and I don't have time to track it down. When you figure it out, please let me know.

This page would probably be useful:

https://github.com/ipython/ipython/wiki/Cookbook:-nbconvert-templates 

Alternatively, you also might be able to add something to your custom.css file. That wouldn't work for all notebook customizations though.

-Jim

To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/da093d76-37c2-4f96-a63f-8b6219ec3a3b%40googlegroups.com.

[John Drake]

Got it to work =)

Set background color to #FFFFFF in nikola\data\themes\base\assets\css\nikola_ipython.css

Thus, for line 1-9, you should see...

div.prompt {
  padding: 0.6em;
  font-size: 13px;
  background-color: #FFFFFF;
  margin-right: 1em;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

Now, I don't think actually modifying the underlying nokia files is the best idea (not to mention, they will be overwritten when its updated next time). Currently, I am using a custom theme from bootwatch., which adds a custom folder to my website folder. I thought if I simply copied the above code into custom\assets\css\bootstrap.css it would work.... but that doesn't appear to be so (I really have no background in CSS). There is also a bootstrap.min.css file, which I don't know what it does.

Would be great if someone could comment on the best way to change the default behavior within a custom theme.

Thank you for the pointers!

[Chris Warrick]

Option 1:
You can copy nikola_ipython.css into
themes/custom/assets/css/nikola_ipython.css and modify it there.

Option 2:
There’s also support for a custom.css file, but it’s loaded before
nikola_ipython.css, so you would need to use `background-color:
#ffffff !important;` to make it work. The benefit of that is you
could just have a three-line CSS file that overrides only the one
rule, and if we ever change the file in Nikola, those modifications
will be reflected in your site.

--
Chris Warrick <https://chriswarrick.com/>
PGP: 5EAAEA16

[John Drake]

Thank you!

Options 2 works quite well and seems to be the way to go.