Portal HTML
templates design
Documentation applicable for LemonLDAP::NG
>= 0.9.3
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/pastel/ for the provided 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: template for the error page.
- header.tpl: common header (included in above templates).
- footer.tpl: common footer (included in above templates).
- notification.tpl: template to display notifications.
- password.tpl: template for the password modification tab.
Each template include a CSS file, named "styles.css".
Icons and javascripts are in skins/common/.
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
configuration
In portal/index.pl, you can find some
configuration variables:
- XWiki.MySkin: name of the skin (ex: "pastel")
- $skin_dir: full system path to skins
- $appsxmlfile: application XML file (learn more)
- $appsimgpath: web path to application logos
- $user_attr: session attribute to display as connected user (ex:
"uid")
- USER_CAN_CHANGE_PASSWORD: constant to enable the password
modification tab
- REQUIRE_OLDPASSWORD: constant to display the "old password"
field
- DISPLAY_LOGOUT: constant to display the logout tab
- AUTOCOMPLETE: constant to set the autocomplete tag in forms (default
to "on").
- DISPLAY_RESETPASSWORD: constant to display the "reset password"
form.
And in Menu constructor, you can use condition for tab display
(
learn
more)
Templates variables
provided by portal/index.pl
When you edit/create a template file, you can use
some variables provided by the portal script. Of course, you can add
variables by editing the portal/index.pl.
Common
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.
- REQUIRE_OLDPASSWORD: boolean to display "old password" field
- DISPLAY_PASSWORD: boolean to display the password tab
- AUTOCOMPLETE: "on" or "off" to enable/disable autocomplete in
forms
- SKIN: name of the skin
login.tpl
specific variables
- AUTH_URL: URL submitted for redirection
- DISPLAY_FORM: set to 1 if a form can be displayed
- LOGIN: submitted login
- DISPLAY_RESETPASSWORD: boolean to display the "reset password"
form
- LOGOUT_URL: URL for logout
- DISPLAY_APPSLIST: boolean to display the appslist tab
- DISPLAY_LOGOUT: boolean to display the logout tab
- DISPLAY_TAB: name of the pre-selected tab
- APPSLIST_MENU: html code of appslist menu div
- APPSLIST_DESC: html code of appslist description divs
- AUTH_USER: identity of connected user
notification.tpl specific
variables
- NOTIFICATION: content of notifications (HTML code)
Template
structure
The default LemonLDAP::NG template follow this
structure:
- html
- body
- div id=page
- div id=header
- (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!