search

regebro / hovercraft

Make dynamic impressive presentations from text files!
https://hovercraft.readthedocs.org
MIT License
1.49k stars 208 forks source link

Header / Footer Design #168

Closed srhuels closed 6 years ago

srhuels commented 6 years ago

Hi all,

hovercraft is a real nice tool! Is it possible to define some html-code for the header or footer witch is place in the index.html file after generating with Hovercraft.

I want to create a design like this (made with impress.js): https://www.ub.uni-bielefeld.de/div/praesentationen/impress-js/html5/#/start

Many tanks Regards Sven

regebro commented 6 years ago

Essentially design for Hovercraft! is just web design. Anything you can do with CSS you can easily do by adding a CSS file. You can also add ReST headers with .. header:: and .. footer::, see the tutorial example for that.

For anything mode complex than that, you have to create your own template. See https://hovercraft.readthedocs.io/en/latest/templates.html for some hints on that.

If you are going for a powerpoint style presentation, ie, without rotation and zooms etc, one easy way of adding organization logos etc is to just add a static image with css that is shown the whole time. I did something similar in this presentation: https://github.com/regebro/prehistoric-python by adding a logo in the .. footer:: section and using CSS to make it's position "absolute". You could do that with a background, although it needs to be in the .. header:: position then, or it will block out the content, IIRC.

srhuels commented 6 years ago

Am Mon, 09 Jul 2018 02:36:59 -0700 schrieb Lennart Regebro notifications@github.com:

Essentially design for Hovercraft! is just web design. Anything you can do with CSS you can easily do by adding a CSS file. You can also add ReST headers with .. header:: and .. footer::, see the tutorial example for that.

For anything mode complex than that, you have to create your own template. See https://hovercraft.readthedocs.io/en/latest/templates.html for some hints on that.

If you are going for a powerpoint style presentation, ie, without rotation and zooms etc, one easy way of adding organization logos etc is to just add a static image with css that is shown the whole time. I did something similar in this presentation: https://github.com/regebro/prehistoric-python by adding a logo in the .. footer:: section and using CSS to make it's position "absolute". You could do that with a background, although it needs to be in the .. header:: position then, or it will block out the content, IIRC.

Hi Lannart,

ist there a possibility to change the "DEFAULT_MOVEMENT = 1600" from the position.py outside this file, for example in a .rst file or .cfg file of a Template?

Herzliche Gruesse aus Huels Sven Roth

"Take your passion and make it happen...!"

regebro commented 6 years ago

No, but if you don't specify a movement for a slide it will use the same as for the previous slide, so you only need to change one, and the remaining will copy it.

srhuels commented 6 years ago

If i define a border for the step in this way: .step { display: block; padding: 0px; width: 161vh; height: 99vh; background-color: white; border: 2px solid rgba(0, 0, 0, .4); border-radius: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, .1); } Where can i define the padding for the content?

srhuels commented 6 years ago

O.K. got it with box-sizing: border-box; in .step...