==== Usage of ODT Frames ====

Two new syntax tags to support frames have been added (**frame-open** and **frame-close**) in release 2016-04-23. Together with CSS they can be used to specify a layout for the exported ODT document.

There might be several use cases for it but e.g. you can use it to specify the layout for writing a letter. The following example code sections show a CSS template page content and an example letter page content.

Example template page content:
<file css templatepage.txt>
/**
 * These is an example for ODT styles coded in CSS
 * for the DokuWiki basic formatting tags.
 *
 * Do not edit this file. Instead add your own styles in
 * the configured template directory ('tpl_dir') and set it under
 * config option 'odt_template'.
 * 
 * Notice: this is pseudo CSS. It can include elements or properties
 *         which are not known to CSS but exist in ODT format as ODT XML
 *         attributes or which have meaning to the ODT plugin only.
 *
 * P.S.: to be able to upload CSS files with the media manager
 *       you need to edit DokuWiki's mime config file.
 *       See https://www.dokuwiki.org/mime for more information.
 */

/* Headings 1 to 5
 * DokuWiki syntax: ====== Heading ======
 */
h1,
h2,
h3,
h4,
h5 {
    font-family: "Bitstream Vera Sans";
    font-weight: bold;
    font-style: italic;
    color: yellow;
}

h1 {
    font-size: 24pt;
}


h2 {
    font-size: 18pt;
}


h3 {
    font-size: 14pt;
}

h4 {
    font-size: 12pt;
}

h5 {
    font-size: 10pt;
}

/* Normal text
 * DokuWiki syntax: Just text
 */
body {
    font-style: normal;
    margin-top: 0cm;
    margin-bottom: 0.212cm;
    text-align: justify;
}

/* Emphasized, italic text
 * DokuWiki syntax: //Italic text//
 */
em {
    font-style: italic;
}

/* Bold text
 * DokuWiki syntax: **Bold text**
 */
strong {
    font-weight: bold;
}

/* Underlined text
 * DokuWiki syntax: __Underlined text__
 */
u {
    text-decoration: underline;
}

/* Monospaced text
 * DokuWiki syntax: ''Monospaced text''
 */
code {
}

/* Deleted text
 * DokuWiki syntax: <del>Deleted text</del>
 */
del {
    text-decoration: line-through;
}

/* Preformatted Text
 */
pre {
    font-family: "Bitstream Vera Sans Mono";
    margin-top: 0cm;
    margin-bottom: 0.2cm;
    join-border: false;
}

/* Quotations
 * DokuWiki syntax: > Quotation1
 */
quotation1,
quotation2,
quotation3,
quotation4,
quotation5 {
    margin-top: 0.25cm;
    margin-bottom: 0.25cm;
    padding: 0.5cm;
}

quotation1 {
    margin-left: 1cm;
    border-left: 5pt solid #c0c0c0;
}

quotation2 {
    margin-left: 2cm;
    border-left: 5pt solid #9966cc;
}

quotation3 {
    margin-left: 3cm;
    border-left: 5pt solid #c5000b;
}

quotation4 {
    margin-left: 4cm;
    border-left: 5pt solid #579d1c;
}

quotation5 {
    margin-left: 5cm;
    border-left: 5pt solid #ff9966;
}

/* Table
 * DokuWiki syntax: normal table syntax
 * HINT: use pseudo property align (left, center, right)
 *       to align the whole table.
 */
table {
    border-collapse: collapse;
}

/* Table header
 * DokuWiki syntax: normal table syntax
 */
thead {
    border: 1pt solid black;
    background-color: whitesmoke;
}

/* Table heading
 * DokuWiki syntax: normal table syntax
 */
th {
    text-align: center;
    font-weight: bold;
}

/* Table cell
 * DokuWiki syntax: normal table syntax
 */
td {
    border: 1pt solid black;
}

/* Horizontal line
 * DokuWiki syntax: ----
 */
hr {
    border-bottom: 0.04cm double #808080;
    border-line-width-bottom: 0.002cm 0.035cm 0.002cm;
    margin-bottom: 0.5cm;
}

/* Layouts for different list levels.
 * 
 * You can also use images instead of numbers or bullets by using
 * 'list-style-image: url('picture.png');' instead of 'list-style-type'.
 *
 * The base path is the media directory.
 * So in this case the picture would be expected in file
 * 'dokuwiki-installation-directory/data/media/picture.png'.
 */

/* Un-ordered list.
 * DokuWiki syntax: * list item text
 */
ul.level1 {
    list-style-type: disc;
}

ul.level2 {
    list-style-type: circle;
}

ul.level3 {
    list-style-type: square;
}

ul.level4 {
    list-style-type: blackcircle;
}

ul.level5 {
    list-style-type: heavycheckmark;
}

ul.level6 {
    list-style-type: ballotx;
}

ul.level7 {
    list-style-type: heavyrightarrow;
}

ul.level8 {
    list-style-type: lightedrightarrow;
}

ul.level9 {
    list-style-type: none;
}

ul.level10 {
    list-style-type: bullet;
}

/* Ordered list.
 * DokuWiki syntax: - list item text
 */
ol.level1 {
    list-style-type: "1";
}

ol.level2 {
    list-style-type: "a";
}

ol.level3 {
    list-style-type: "I";
}

ol.level4 {
    list-style-type: "A";
}

ol.level5 {
    list-style-type: "i";
}

ol.level6 {
    list-style-type: "i";
}

ol.level7 {
    list-style-type: "i";
}

ol.level8 {
    list-style-type: "i";
}

ol.level9 {
    list-style-type: "i";
}

ol.level10 {
    list-style-type: "i";
}

/* Style for first paragraph of a list.
 * (ordered and unordered)
 * Can be used to set margin of the list to previous content.
 */
.listfirstparagraph {
    margin-top: 0.5cm;
}

/* Style for last paragraph of a list.
 * (ordered and unordered)
 * Can be used to set margin of the list to following content.
 */
.listlastparagraph {
    margin-bottom: 0.5cm;
}

/* Internet link
 */
internetlink {
    color: #000080;
    text-decoration: underline;
}

/* Visited internet link
 */
visitedinternetlink {
    color: #800000;
    text-decoration: underline;
}

/* Local link
 */
locallink {
    color: #000000;
    font-weight: bold;
    text-decoration: underline;
}

/* Visited local link
 */
visitedlocallink {
    color: #000000;
    font-weight: bold;
    text-decoration: underline;
}

#addressframe {
    left: 2cm;
    top: 4.47cm;
    width: 8.5cm;
    min-height: 2.73cm;
    /*border-color: black;*/
    position: absolute;
    padding-left: 0.5cm;
}

#bodyframe {
    left: 2.5cm;
    top: 15cm;
    width: 10cm;
    /*border-color: black;*/
    position: absolute;
}

#foldingmark1 {
    left: 0cm;
    top: 8.7cm;
    width: 1cm;
    min-height: 0.01cm;
    position: absolute;
    background-color: black;
}

#foldingmark2 {
    left: 0cm;
    top: 19.2cm;
    width: 1cm;
    min-height: 0.01cm;
    position: absolute;
    background-color: black;
}
</file>

Example letter page content (it assumes that the example template page name is **mytemplatepage**):
<file txt letterpage.txt>
~~NOCACHE~~
{{odt>templatepage:mytemplatepage}}

{{odt>frame-open:odt-css-id="addressframe";}}
John Doe \\ Examplestreet 123 \\ 12345 Example-City
{{odt>frame-close}}

{{odt>frame-open:odt-css-id="bodyframe";}}
Dear Mister Doe, \\
\\
this is just an example. \\
\\
Sincerely, \\
Me
{{odt>frame-close}}

{{odt>frame-open:odt-css-id="foldingmark1";}}{{odt>frame-close}}
{{odt>frame-open:odt-css-id="foldingmark2";}}{{odt>frame-close}}
</file>

If you export it, then the resulting document will have the destination address at the right position for german A4 letter envelopes and two markers showing where the sheet should be folded.

If you play around with frames it might be useful to see a border to check the positioning of a frame. To have a border just set a border color in the CSS properties of the frame, e.g. **border-color: black;**. Also see the out commented code in example template page.

The browser layout of a wiki page is not affected by the ODT frames syntax tags.