[IPython-User] Styling Notebook

Matthias BUSSONNIER bussonniermatthias@gmail....
Mon Jul 2 03:17:13 CDT 2012

Le 2 juil. 2012 à 03:27, klo uo a écrit :

> Initially I thought to try and roll my own CSS, but when I looked
> closer it's probably bad idea.
> What I managed to do is distill missing elements from "base" css style
> and then include main css from themes available here:
> http://jqueryui.com/themeroller
> In short, you download theme and copy theme folder (it's in css
> subfolder in downloaded theme archive) in
> "..\frontend\html\notebook\static\jquery\css\themes", then just put
> there (in new theme folder) my attached css file, and change line 9 in
> "..\frontend\html\notebook\templates\page.html" accordingly.
> This can be simplified with entry in ipython notebook config file I guess.
> Screenshots:
> http://i.imgur.com/KbxfU.png
> http://i.imgur.com/5NUmK.png
> Attached css file is not "least common denominator" and can be further
> reduced, and I think it works fine from what I tested. With dark
> themes it doesn't work. I also wonder why the author of these changes
> didn't create new css file and then include original css in it, so
> that this kind of reversing could have been avoided, and changing the
> theme would have been easier.

We really are low on manpower to make a nice way to tweak css. 
Right now, the css is as it is because we started with this css, and 
try to match the current jquery theme allover the place. The hard 
part is to keep the cross-browser compatibility which sometimes implies 
that you can't just override some css with new one, and have to modify the base file.

Also we ship with one particular hash of a deprecated dev version of jQuery UI for the menubar…
the the support of css is uncertain for the theme roller.

I also know that for example some element could be made transparent, to give an easier theming. 

My personal point of view is that we should use something like lesscss or saas-css to make the 
branding more easyier, I don't know what brian think of it, he is the one that wrote most of the notebook UI,
he should be the one with a final decision. [note that you should be able to get a .less file for  tooltip.css by reverting the right commit.]

I don't now how jQuery ui theme roller works, but if we could change the color/dimensions of our css 
at the same time, it would be cool.

> Whatever, if you think it's interesting I could include detailed
> walkthrough in wiki, although procedure is simple but maybe not
> obvious to all. Also if I missed something I would like to know. Don't
> tell me there is already way to do this :D

For *small* change, even local to a notebook you can write CSS directly into one of the markdown cell. 

Feel free to document how to change the branding on the notebook, I think it might also be useful for the sage project, 
depending on how much they use our codebase for their project.

If you find that some changes can facilitate the branding, don't hesitate to open a pull request. 
Thought, I'm not sure a config flag does really makes sense, I'll see this more as a compile time option. 

> Cheers
> <jquery-ui.min.css>_______________________________________________
> IPython-User mailing list
> IPython-User@scipy.org
> http://mail.scipy.org/mailman/listinfo/ipython-user

More information about the IPython-User mailing list