Portal HTML templates design

LemonLDAP::NG skins and HTML::Template Perl module

LemonLDAP::NG templates are designed for HTML::Templates Perl module.

LemonLDAP::NG portal use "skins", located in the skins/ directory of the portal. Each skin is a particular directory, for example skins/default/ for the default skin.

Here is the list of required template files:

  • login.tpl: template for the login page.
  • menu.tpl: template for the menu page.
  • error.tpl: tempalte for the error page.
  • header.tpl: common header (included in above templates).
  • footer.tpl: common footer (included in above templates).
Each template include a CSS file, named "styles.css".

To create your own skin, just copy the default skin to another directory (eg.: skins/myskin/) and edit templates and CSS files. Advanced customization can be done by editing the portal/index.pl.

Templates variables provided by portal/index.pl

When you edit/create a template file, you can use some variables provided by the portal script. Here is the list of these variables:

  • AUTH_ERROR: error text returned by the portal.
  • AUTH_ERROR_TYPE: type of the error:
    • positive: the action was successful;
    • negative: a problem occured;
    • warning: not a fatal error, need user action.
  • AUTH_URL: URL submitted for redirection.
  • DISPLAY_FORM: set to 1 if a form can be displayed.
  • LOGOUT_URL: URL for logout.
Of course, you can add variables by editing the portal/index.pl.

Template structure and CSS elements

The default LemonLDAP::NG template follow this structure:

  • html
    • body
      • div id=page
        • div id=header
        • div class=message
        • (html content)
        • div id=footer

Internationalization (i18n)

LemonLDAP::NG portal is able to display an HTML template according to the user's browser language.

In order to work, you have to set inside the template the translations of all displayed text. Error message translation is already done inside LemonLDAP::NG Portal module.

Example of mono-lingual template

<p><label>Login</label>
<input name="user" type="text" size="30" />
</p>

The string "Login" is set in the template and will not be translated.

Example of multi-lingual template

<p><label><lang en="Login" fr="Identifiant" /></label>
<input name="user" type="text" size="30" />
</p>

The markup <lang> will be catched by LemonLDAP::NG and only the wanted translation will be displayed. If the user's language has no corresponding translation, the first translation is selected. So you can set your default language by choosing the first translation ("en" in the above example).

Warning: don't forget the quotes and the trailing slash of the markup!