Avendoo® online documentation

Design templates

Design templates enable to design quick and standardized learning content. By using the given templates time-consuming formatting is omitted, because individual elements regarding font size, color and space are defined. Via variables you can integrate master data, which will be automatically filled with content.

There are the mass processing functions Copy, MoveDeleteChange owner, and Export for design templates. More information about these functions you find under Design templates: Mass processing functions.

To create a new design template, choose Resources → Design templates → New  design template. The design template wizard opens.

Master data


Enter a title for the new design template. This title serves as managing the design template and is only visible for the author.


The teaser is a short text which serves as managing the design template. This text is only visible for the author, too.


Enter the original language of the design template.

Design template type

Choose the object type for which the design template is allowed to be used.

Design template

You can create your own design templates in the HTML Layout or via CSS.

On the right side you see in a quick preview the result of your programming.

HTML Layout

1.Provide paragraphs for questions (available/not available) and define sequence.

Potential paragraphs

  • layoutHeadlineText = area for the question headline
  • layoutIntroductionText = introduction for background information about the question
  • layoutQuestionText = actual question or instruction (“W“ or “H” at the beginning and “?” at the end)
  • layoutInstructionText = additional information for tips or for instruction (for example “There are multiple answers correct.”)
  • layoutMediaText = media area for standardized positioning of media or images
  • commentRight = paragraph for the comment at correct answer
  • commentWrong = paragraph for the comment at incorrect answer
  • layoutAnswerarea = answer area (have to be available)

2. Define showIfEmpty

  • This attribute can have two values: “true” and “false”
  • If “true” the area will be shown and place is reserved, even when there is no text or content in a paragraph -> standardized layout
  • If “false” the area won’t be shown when there is no text or content in a paragraph -> compact dynamic layout

3. Constant elements

  • You can provide even constant elements via a design template. They appear in each question, for example constant text in headlines or text at the beginning of a comment.

Overview of variables, which can be used in design templates

  • $Author$ = name of the author (first and last name)
  • $AuthorLastnameFirst$ = name of the author, but last name is shown first (last name, first name)
  • $QuestionPoints$ = maximum points of the question
  • $Serial$ = serial number, generated by Avendoo®. You can search for this serial number at the workplace.
  • $ExternalReference$ = Output of the data of “External Reference”-field from the master data of a question.
  • $ExternalVersion$ = Output of the data of “External Version”-field from the master data of a question.
  • $CreationDate$ = creation date of the question
  • $ChangeDate$ = change date of the question
  • $ObjectTitle$ = question title of the master data

You enter a CSS structure for your design template. For creating design templates knowledge in configuring HTML and CSS source code is necessary.

Example for a source code for a CSS structure

#questionWrapperCol1{ float:left; } #questionWrapper{ padding:20px; overflow:auto;

} .questionHeadline, .questionHeadline p { font-size:20px;

padding-bottom:20px; color: #334466; font-family: Arial,”Times New Roman”,Times,serif; font-weight: normal; }


.IntroductionText p { font-weight: 14px; line-height: 15px; color:#535761; }

.instructionText, .instructionText p { font-weight:bold;

color:#000033; font-size:14px; line-height: 15px; }

.questionText, .questionText p { font-weight:bold; font-size:16px; line-height: 17px; color:#003366; padding-bottom:16px; }

.commentRight, .commentRight p { font-weight:bold; color:#006600; font-size:16px; line-height: 17px; }

.commentWrong, .commentWrong p{ color:#CC0000; font-weight:bold; font-size:16px; line-height: 17px;


#media{ }


The preview shows you the result and the basic structure of the created design template. To save the design template, click on Save.

Using simple design templates

Beside the standard design templates package you can create your own design templates. In the overview (resources → Design templates) you see all already created design templates, listed for title, owner, creation and change date and design template type. You can limit the overview with the filter on the left side.

You get the design templates package “Simple design templates” in Avendoo® by default.