How to modify Jinja templates for nbconvert?
Question: I am trying to find alternate ways to display my IPython Notebooks.

What I am currently doing is modifying the Jinja templates found here
(C:\Anaconda\Lib\site-
packages\ipython-1.1.0-py2.7.egg\IPython\nbconvert\templates) and then simply
using the nbconvert command line tool to export them into an HTML file. This
method works but I have been unable to modify the actual layout of the
notebook.

Below are some examples on how I want my notebooks to look like.

[Example
1](http://www.google.com/imgres?espv=210&es_sm=93&biw=1600&bih=799&tbm=isch&tbnid=PNlyKvtTzF54_M%3a&imgrefurl=http://www.karenandarthritis.com/news-
time.shtml&docid=5OlDvxwbs1EJHM&imgurl=http://www.karenandarthritis.com/images/time-
article.jpg&w=800&h=1064&ei=Yx1oUsJqj6PgA-
WXgJgJ&zoom=1&ved=1t:3588,r:0,s:0,i:88&iact=rc&page=1&tbnh=201&tbnw=151&start=0&ndsp=27&tx=79&ty=35)

[Example
2](http://www.google.com/imgres?espv=210&es_sm=93&biw=1600&bih=799&tbm=isch&tbnid=uMkWsNYMZMYdsM%3a&imgrefurl=http://www.personal.psu.edu/cbp5032/blogs/pritts_art_203/2010/05/assignment-21-authorship-
and-
technology.html&docid=2ti40PeirOM4SM&imgurl=http://www.personal.psu.edu/cbp5032/blogs/pritts_art_203/ed_article_time-
magazine.jpg&w=1000&h=1357&ei=Yx1oUsJqj6PgA-
WXgJgJ&zoom=1&ved=1t:3588,r:1,s:0,i:91&iact=rc&page=1&tbnh=201&tbnw=148&start=0&ndsp=27&tx=110&ty=76)

[Example
3](http://www.google.com/imgres?espv=210&es_sm=93&biw=1600&bih=799&tbm=isch&tbnid=7SCjINSnUbXKEM%3a&imgrefurl=http://www.dezeen.com/2008/05/15/dezeen-
in-time-magazines-
design-100/&docid=k49Z4G2U__NZCM&imgurl=http://static.dezeen.com/uploads/2008/05/time-
article.jpg&w=450&h=450&ei=Yx1oUsJqj6PgA-
WXgJgJ&zoom=1&ved=1t:3588,r:92,s:0,i:372&iact=rc&page=3&tbnh=187&tbnw=187&start=63&ndsp=44&tx=72&ty=84)

[Example
4](http://www.google.com/imgres?start=261&espv=210&es_sm=93&biw=1600&bih=799&tbm=isch&tbnid=XpTF0HdpczeeGM%3a&imgrefurl=http://ozandends.blogspot.com/2012_10_01_archive.html&docid=pGA8a2buMjXN0M&imgurl=http://1.bp.blogspot.com/-Q4Wi1H4EDZE/UHs8ZVmGwBI/AAAAAAAAFM0/wZsSgED6Iwo/s1600/TTSpot%252B10%252BLyga%252Bletter.jpg&w=400&h=539&ei=UiBoUq_SHfe14APmsIHADQ&zoom=1&ved=1t:3588,r:89,s:200,i:271&iact=rc&page=9&tbnh=172&tbnw=127&ndsp=40&tx=40&ty=69)

**EDIT:**  
**[Here](https://dl.dropboxusercontent.com/u/37919918/Untitled2.html)** is
what I was able to come up with adding a little html code to the notebook.

Sample Code:

    
    
    from IPython.display import HTML
    
    bottom = """
    
    <div style="background:darkblue;color:white;border-radius:10px 10px 10px 10px;">
    <br>
          <div class="container-fluid">
    
          <div class="row-fluid">
            <div class="span12">
              <!--Sidebar content-->
              <font size="5"><strong><p>A powerful course of study for:</p></strong></font>
              <br>
    
              <ul>
                <li>The basic foundation for Data Analysis</li>
                <li>Hands-on experience with seasoned professionals</li>
                <li>Entry-level IT professionals seeking a strong foundation</li>
                <li>Managers who manage small to large scale analytical projects</li>
              </ul>
          </div>
    
          </div>      
          </div>
    </div>
    
    """
    
    HTML(bottom)
    


Answer: At first I was not sure if this is a "real" question, as there is a
significant difference between a notebook and a newspaper!  
However, if the question aims at getting multicolumns in the nbconverted
notebook, I would suggest googling for `html multicolumn`. There you will find
some options including CSS based styling.  
Using this approach simply copy the html_full template and add a div style
like

    
    
    div.mcolumn {
        -webkit-colums: 3 200px;
        -moz-column-count: 3;
        -moz-column-width: 200px;
        columns: 3 200px;
    
        -moz-column-gap:30px; /* Firefox */
        -webkit-column-gap:30px; /* Safari and Chrome */
        column-gap:30px;
    
        -moz-column-rule:1px dotted #aaaaaa; /* Firefox */
        -webkit-column-rule:1px dotted #aaaaaa; /* Safari and Chrome */
        column-rule:1px dotted #aaaaaa;
    }
    

Embed the whole page (body block) in this div and voilá, you have a 3 column
layout. However, be aware that code cells and images might lead to some
issues.

