Working with templates and categories

Miko Hejwosz, January 2003

3. Templates

Templates define the looks of your pages of knowledge (so called SuperMemo elements). You use templates to give the elements in your collection your preferred look (e.g. you may want your Biology items to be displayed in white font against green background).

You have to learn three basic skills in order to give the elements in your collection your preferred look:

3.1. Designing templates

3.1.1. Designing your first template from scratch

Suppose you are adding lots of items related to the Treaty of Nice (a plan for expanding the European Union). Suppose you would like to give all items related to the European Union a separate look. It would draw on the flag of the European Union with its twelve gold stars forming a circle against the background of the blue sky. Let your new template be composed of two text components, one for the question part and the other for the answer part of an item, with a yellow font used in both components against the element's blue background.

4 major steps are required to design such a template from scratch:

STEP 1: Adding a new empty element to your collection:
  1. Click the Contents button (Alt+C) to switch from the element window to the contents window,
  2. On the Edit toolbar, in the Type box, click the drop-down arrow, and then select Items,

    As a result, all new elements, which you will add to the knowledge tree, are going to be items.

  3. In the knowledge tree, select an element, to which a new empty child element will be added,
  4. Click the Add button to add a new empty child element to the currently selected element,
  5. Right-click the newly added empty child element, and then choose View : Selected element (Ctrl+Enter).

    You should now be able to see the newly added empty element in the element window.

STEP 2: Placing components on the element:
  1. Place the first text component on the element (the question part)

    You need only 3 clicks to create a component on an element (e.g. a picture):

    • 1st click: Select a component on the Compose toolbar,
    • 2nd click: Point where you would like the component's top-left corner to be placed in the element,
    • 3rd click: Point where you would like the component's bottom-right corner to be placed

    If you would like to change a component's location within element:

    1. Right-click a component, and then choose Mode : Dragging mode (Alt+click will do the same in most cases)

      You should now be able to drag the component, which has become darker in color, to a new location.
    2. Click the component, and then drag it to a new location without releasing the mouse button,
    3. Once you are satisfied with the new location of the component, release the mouse button, and then press Esc to exit the dragging mode.

      You can inspect the present location of the component in respect to the top-left corner of the element by peeking at the X and Y values on the right from the Dismiss button.

    If you would like to resize a component:

    1. Click a component to set it in the editing mode,
    2. Point to the component border,
    3. When the mouse pointer becomes a double-headed arrow, drag the border,
    4. Once you are satisfied with the new size of the component, press Esc to exit the editing mode.

      You can inspect the width and height of the component by peeking at the W and H values on the right from the Dismiss button.
  2. In a similar fashion (as described in Point 1 of this step), add the second text component in the element.
STEP 3: Setting the element properties

To change the color of the element's background:

  1. Choose Edit : Menus : Element> (Alt+F10) in the menu bar,
  2. In the element menu, select Color,
  3. In the Color dialog box, click a desired color (e.g. blue),
  4. Click OK to close the dialog box and save the selection you have made.

    Your element's background should now become blue.

STEP 4: Setting properties components

To make the answer component invisible when the question part of the item is asked:

  1. Right-click the second component, in which you are going to type in the answer part of an item, and then select Answer.

To change the font, which is going to be displayed in the question and answer components:

  1. To set a new font in the question component:
    1. Right-click the question component, and then choose Text : New font,
    2. In the Font dialog box, select the font and/or set its properties (e.g. Times New Roman, Bold, 18, Yellow),
    3. Click OK to close the dialog box and save the selection,
    4. In the New registry member name dialog box, in the Unique name text box, type in a unique name (e.g. European Union), under which the font you have selected and its properties you have set (if any) will be stored in the font registry,
    5. Click OK to save the font under a chosen name.

      You should now be able to see your new font displayed in the question component.

      If the question component is empty (i.e. it contains no text), type in an arbitrary word (e.g. question) to inspect if it is displayed in your font.

  2. To reuse the newly added font in the answer component:
    1. Right-click the answer component, and then choose Links : Font (Shift+Ctrl+F),
    2. In the Font registry window, in its left pane, select the European Union font registry member,
    3. Click the Accept button to close the registry window and display the font in the answer component.

      If the answer component is empty (i.e. it contains no text), type in an arbitrary word (e.g. answer) to inspect if it is displayed in your font.

3.1.2. Saving templates for future use

Once you have designed your template, you should save it in the template registry. If you save your template in the registry you will later be able to use it in other elements, too.

To save your template in the template registry:

  1. Right-click over the element toolbar, and then choose Template : Save as template,
  2. In the Template registry dialog box, in the Input template name text box, type in a unique name (e.g. European Union), under which the template you have designed will be stored in the template registry,
  3. Click OK to save the template under a chosen name.

If you wish to save your template in the registry and make it the default template for the currently selected category, use Template : Save as default (Ctrl+Alt+M) from the element menu. This template will now be used with each new element added to this category. 

To find out which category is currently selected, click the Tools toolbar, and then peek at the Category box (the first from the left).

3.1.3. Designing a new template by modifying one of the previously created templates

Suppose you would like to design a template similar to the one you created before. It would also include two text components, however, you would like to change the element's background, the background of individual components, and the color of the font so they would all reflect the colors of the British flag. Thus designed template would be used for your English vocabulary items.

You could design this template by following the same steps as it was with your first template. However, your new template will be similar to the one created before (i.e. your new template and the European Union template will both have 2 plain text components). It is easier then to reuse the previously designed template, modify some of its properties, and save it under a different name in the template registry.

4 major steps are required to create a new template by using an old one:

STEP 1: Adding a new item:
  1. Click the Add new button at the bottom of the element window or press Alt+A,
  2. Press Esc twice to exit the editing mode.

Once your new template is ready and saved in the template registry, you can delete the element with which it was designed.
STEP 2: Applying the previously designed template:
  1. Right-click over the element toolbar, and then choose Template : Apply template (Shift+Ctrl+M),
  2. In the Template registry window, in its left pane, select the European Union template registry member,
  3. Click the Accept button to close the registry window and apply the European Union template to the newly added item,

    You should now be able to see the European Union template applied to the newly added item.

  4. Right-click over the element toolbar, and then choose Template : Impose template (Shift+Ctrl+F2),
  5. Click Yes to the Overwrite source data with the current template? Template=European Union query,
  6. Click Yes to the Detach the template? query.

    This will make sure you modify the template only in this element, not all elements that use this template.

    Remember to impose and detach the template if you do not want changes to one element affect all other elements using the template.

STEP 3: Modifying element properties

To modify the element's background from blue to navy:

  1. Right-click over the element toolbar, and then select Color,
  2. In the Color dialog box, click a new color (e.g. navy),
  3. Click OK to close the dialog box and save the selection you have made.
STEP 4: Modifying component properties

To change the background of individual components:

  1. To change the background of the question component:
    • Right-click the question component, and then choose Color,
    • In the Color dialog box, click a new color (e.g. white),
    • Click OK to close the dialog box and save the selection you have made
  2. Similarly, change the background of the answer component.

To change the font, which is going to be displayed in the question and answer components:

  1. To modify the already existing font in the question component:
    1. Right-click the question component, and then choose Text : New font,
    2. In the Font dialog box, select the font and/or set its properties (e.g. Times New Roman, Bold, 18, Red),
    3. Click OK to close the dialog box and save the selection,
    4. In the New registry member name dialog box, in the Unique name text box, type in a unique name (e.g. English), under which the font you have selected and its properties you have set (if any) will be stored in the font registry,
    5. Click OK to save the font under a chosen name.

  2. To reuse the newly modified font in the answer component:
    1. Right-click the answer component, and then choose Links : Font (Shift+Ctrl+F),
    2. In the Font registry window, select the English font registry member in the left pane, which shows the alphabetically sorted list of the individual registry members,
    3. Click the Accept button to close the registry window and display the font in the answer component.

Once you are done with the new template, you should save it in the template registry (as in 3.1.2. Saving templates for future use).

3.2. Changing the look of elements

3.2.1. Changing the look of an individual element

  1. Right-click over the element toolbar, and then choose Template : Apply template (Shift+Ctrl+M),
  2. In the Template registry window, in its left pane, select a template that you want to apply,
  3. Click the Accept button to close the registry window and apply the template you have selected to a given item.

3.2.2. Changing the look of a subset of elements

3.2.2.1. Changing the look of a subset of elements in the contents window

Use the contents window to change the look of elements belonging to a given branch:

  1. Click the Contents button (Alt+C) to switch from the element window to the contents window,
  2. In the knowledge tree, select a branch with elements, to which you would like to apply a new template,
  3. On the Edit toolbar, click the Branch menu button , and then choose Template : Apply template,
  4. In the Template registry window, in its left pane, select a template that you would like to apply,
  5. Click the Accept button to close the registry window and apply the template to all elements of the selected branch,
  6. Click Yes to the Do you want to apply a template to elements among all descendants of "Title of the selected branch" query,
  7. Click OK on an information dialog saying how many elements the new template has been applied to.

3.2.2.2. Changing the look of a subset of elements stored in the browser

Use browser to change the look of a subset of elements in your collection:

  1. On the Browser toolbar, click the Process browser button , and choose Template : Apply template,
  2. In the Template registry window, in its left pane, select a template that you would like to apply,
  3. Click the Accept button to close the registry window and apply the template to all elements in the browser,
  4. Click Yes to the Do you want to apply a template to elements among all browser elements? query,
  5. Click OK on an information dialog saying how many elements the new template has been applied to.

For additional hints&tips, complete reference, and rich collection of FAQs related to using templates, read: Templates

Previous | Next
Contents of this article: