[IPython-dev] A good CSS snippet for better talk-style notebooks?

Tue Jun 4 12:26:46 EDT 2013

I mean that when the presentation starts it happens the "presentation_mode" class to <body>, and remove it when you stop.

meaning that 

.presentation_mode h1{
       color: red;
}

In your custom.css or, md cell will make the h1 title red only while on slide.

I suggest using less to do that that allow you to "nest rules" and avoid repeating .presentation_mode

.presentation_mode {
      h1,h2 {
       color: red;
      }

      p {
       text-align: right;
      }

      img {
       fancy_flashing_border()
      }
}

-- 
Matthias

Le 4 juin 2013 à 17:56, Fernando Perez a écrit :

> you mean if I put it in the custom dir for the extension?
> 
> On Tue, Jun 4, 2013 at 2:04 AM, Matthias Bussonnier
> <bussonniermatthias at gmail.com> wrote:
>> Short from my phone,
>> 
>> FYI, you can have a style that apply only when in presentation mode with my
>> js extension.
>> --
>> Matthias
>> 
>> Le mardi 4 juin 2013, Fernando Perez a écrit :
>> 
>>> Thanks, that got me on track.
>>> 
>>> For the record, this is what I used:
>>> 
>>> <style>.rendered_html {
>>> font-size: 150%;
>>> line-height: 1.3;
>>> }</style>
>>> 
>>> <style>.rendered_html li {
>>> line-height: 2;
>>> }</style>
>>> 
>>> <style>.rendered_html h1{
>>> margin: 0.5em 0;
>>> line-height: 1.3;
>>> }</style>
>>> 
>>> <style>.rendered_html h2{
>>> margin: 0.15em 0;
>>> line-height: 1.2;
>>> }</style>
>>> 
>>> <style>.input_prompt {
>>> font-size: 120%;
>>> font-family: Consolas;
>>> }</style>
>>> 
>>> <style>.CodeMirror-lines {
>>> font-size: 120%;
>>> font-family: Consolas;
>>> }</style>
>>> 
>>> <style>.output_area {
>>> font-size: 120%;
>>> font-family: Consolas;
>>> }</style>
>>> 
>>> I actually think we should in general change some of the vertical
>>> spacing of our headings even for the defaults, as it's in general too
>>> big. But these changes gave me reasonable layout at 1024x768
>>> projector-ese for headings, text and bullet lists, as well as good
>>> font sizes for code.
>>> 
>>> Cheers,
>>> 
>>> f
>>> 
>>> On Mon, Jun 3, 2013 at 6:23 PM, klo uo <klonuo at gmail.com> wrote:
>>>> Fernando, I'm not sure if this would help, but a year ago I posted
>>>> about tweaking Notebook css:
>>>> http://mail.scipy.org/pipermail/ipython-user/2012-July/010533.html and
>>>> it's even included in wiki:
>>>> https://github.com/ipython/ipython/wiki/Cookbook:-Styling-Notebook
>>>> 
>>>> Don't know if it works with current theme, and if it does you can use
>>>> Theme Roller editor to customize the style.
>>>> 
>>>> However, I know you guys are busy and Notebook is complex, but perhaps
>>>> you could make default IPython Notebook CSS more accessible. As it is
>>>> now (if it is as I saw it last year) don't mind me saying that it's
>>>> just terrible place hardly anyone would like to tweak
>>>> 
>>>> On Tue, Jun 4, 2013 at 2:45 AM, Fernando Perez <fperez.net at gmail.com>
>>>> wrote:
>>>>> Hi folks,
>>>>> 
>>>>> I've already given a bunch of talks with the notebook, but always
>>>>> using just the defaults and at most zooming in for readability.
>>>>> 
>>>>> Does any of you have a little snippet of CSS you like that styles a
>>>>> notebook a little better for a presentation (fonts, sizes, maybe even
>>>>> color, etc).  If you have a favorte, send it my way!
>>>>> 
>>>>> Thanks in advance!
>>>>> 
>>>>> 
>>>>> f
>>>>> 
>>>>> --
>>>>> Fernando Perez (@fperez_org; http://fperez.org)
>>>>> fperez.net-at-gmail: mailing lists only (I ignore this when swamped!)
>>>>> fernando.perez-at-berkeley: contact me here for any direct mail
>>>>> _______________________________________________
>>>>> IPython-dev mailing list
>>>>> IPython-dev at scipy.org
>>>>> http://mail.scipy.org/mailman/listinfo/ipython-dev
>>>> _______________________________________________
>>>> IPython-dev mailing list
>>>> IPython-dev at scipy.org
>>>> http://mail.scipy.org/mailman/listinfo/ipython-dev
>>> 
>>> 
>>> 
>>> --
>>> Fernando Perez (@fperez_org; http://fperez.org)
>>> fperez.net-at-gmail: mailing lists only (I ignore this when swamped!)
>>> fernando.perez-at-berkeley: contact me here for any direct mail
>>> _______________________________________________
>>> IPython-dev mailing list
>>> IPython-dev at scipy.org
>>> http://mail.scipy.org/mailman/listinfo/ipython-dev
>> 
>> 
>> _______________________________________________
>> IPython-dev mailing list
>> IPython-dev at scipy.org
>> http://mail.scipy.org/mailman/listinfo/ipython-dev
>> 
> 
> 
> 
> -- 
> Fernando Perez (@fperez_org; http://fperez.org)
> fperez.net-at-gmail: mailing lists only (I ignore this when swamped!)
> fernando.perez-at-berkeley: contact me here for any direct mail
> _______________________________________________
> IPython-dev mailing list
> IPython-dev at scipy.org
> http://mail.scipy.org/mailman/listinfo/ipython-dev