Fix the example in the Export to XHTML section
[worg.git] / code / org-info-js / org-slides / slides.org
1 #+STARTUP: align fold nodlcheck hidestars oddeven lognotestate
2 #+TITLE: Slides with Org-Mode and JavaScript
3 #+AUTHOR: Sebastian Rose
4 #+EMAIL: sebastian_rose@gmx.de
5 #+LANGUAGE: en
6 #+OPTIONS:   H:3 num:nil toc:nil \n:nil @:t ::t |:t ^:t -:t f:t *:t TeX:t LaTeX:nil skip:nil d:t tags:not-in-toc
7 #+INFOJS_OPT: path:../org-info.js
8 #+INFOJS_OPT: toc:nil ltoc:nil view:slide mouse:underline
9 #+INFOJS_OPT: up:http://orgmode.org/worg/
10 #+INFOJS_OPT: home:http://orgmode.org buttons:nil
11
12
13 * Welcome to Org-mode and Slides
14
15   + Navigate back and and forth on doubleclick and click.
16   + Use all the navigation and text facilities of org-info.js in your
17     presentations.
18   + Remove warnings on click.
19   + No warnings when navigating with the mouse.
20   + Simple lists are shown item by item automatically.
21
22 * Overview
23
24   + Create the Org-mode file
25   + Export the Org-mode file to XHTML
26   + Create a stylesheet for slides
27
28 * Create the Org-mode file
29
30   *Structure for slides*
31
32   : * Overview
33   :
34   :   + Create the Org-mode file
35   :
36   : * Overview
37   :
38   :   + Create the Org-mode file
39   :   + Export the Org-mode file to XHTML
40
41 * Export the Org-mode file to XHTML
42
43   =view:slide=
44
45   : #+INFOJS_OPT: toc:nil ltoc:nil view:slide mouse:underline
46   :
47   :
48   : * COMMENT html style specifications
49   : # Local Variables:
50   : # org-export-html-style: "<link rel=\"stylesheet\" \
51   : #                type=\"text/css\" href=\"slides.css\" />"
52   : # End:
53
54
55 * Create a stylesheet for slides
56
57   + Stylesheets for slides are different.
58   + The body uses the whole width.
59   + Use the same style for all headlines.
60   + The postamble will be hidden automatically.
61   + Position org-info.js's window.
62
63 ** CSS - body
64
65    Choose a big font!
66
67    :body
68    :{
69    :  width:100%;
70    :  padding:0px 0px 0px 0px;
71    :  margin:0px 0px 0px 0px;
72    :  background-image:url(img/bg.gif);
73    :  background-attachment:fixed;
74    :  background-repeat:repeat-x;
75    :  /* ... etc. */
76    :}
77
78 ** CSS - headlines
79
80    Set all headlines to the same size:
81
82    :h1,h2,h3,h4,h5,h6
83    :{
84    :  font-size: 18pt;
85    :  font-weight:bold;
86    :  color:#104d8c;
87    :  /* ... etc. */
88    :}
89
90 ** CSS - org-info-js
91
92    Position the org-info.js window.
93
94    :#org-info-js-window
95    :{
96    :  position:absolute;
97    :  top:140px;
98    :  left:20%;
99    :}
100
101
102 * TODOS
103
104 **** TODO More features.
105 **** TODO Load stylsheets dynamically.
106 **** TODO Drop lot's of mails with bugs and wishes.
107
108      ------
109
110 **** TODO Have Fun with Org-mode and all the tools around.
111
112 * DONE
113
114   That's all folks.
115
116 * COMMENT html style specifications
117 # Local Variables:
118 # org-export-html-style: "<link rel=\"stylesheet\" type=\"text/css\" href=\"slides.css\" />"
119 # End: