Virtual Spaces Enduser Documentation

Writing Slide or Branching Point Templates

To create a Slide or Branching Point template you have to write two files. One file defines the elements used by the template (this is the Template Code) and one file specifies the layout of the elements (this is the CSS code). In general, the easiest way to write a template is to modify this default code given by the wizard.
Notice: You need some background knowledge about HTML and CSS for creating Slide and Branching Point templates. See SELFHTML.org for further information about these web technologies.

Template Code

Below is an example template code shown. 


<div id="bptemplate">
   	<div id="title" class="title">«title»</div>
	<div id="image01" class="image">%@images[1]@%</div>
	<div id="subtitle" class="subtitle">«subTitle»</div>
	<div id="text01" class="text">%@texts[1]@%</div>
	<div id="footer" class="footer">«footer»</div>
</div>
Generally you can enter any HTML code. If you want a property to be filled in use the property name (see list below) and put it in double angle quotation marks (« » - On OS X its alt-q and alt-shift-q). To fill in an image or a text use %@images[imageNumber]@% and %@texts[textNumber]@% where imageNumber/textNumber is the number of the image/text in the list of images/texts of the Slide or Branching Point. If the template is a Branching Point template there is an additional property called %@choices@%. Put this where the Branching Point Choices shall be filled in.

Properties using « »:

  • Title - title
  • Subtitle - subtitle
  • Description - description
  • Footer - footer
Properties using %@ @%:
  • Images - images[imageNumber]
  • Texts - texts[textNumber]
  • Branching Point Choices - choices

CSS Code

Below an example CSS code is shown. 


#template #subtitle {
}

#template #text01 {
}

#template #image01 {
    float: left; 
}

#template #footer {
    clear:left;
}
Use float: right/left and clear: right/left/both to position title, subtitle, etc.