327 lines
14 KiB
HTML
327 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr" dir="ltr">
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
<meta charset="utf-8" />
|
|
<title>documentation:2.0:portalcustom</title><!-- //if:usedebianlibs
|
|
<link rel="stylesheet" type="text/css" href="/javascript/bootstrap/css/bootstrap.min.css" />
|
|
//elsif:useexternallibs
|
|
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
|
|
//elsif:cssminified
|
|
<link rel="stylesheet" type="text/css" href="/static/bwr/bootstrap/dist/css/bootstrap.min.css" />
|
|
//else --><!-- //endif -->
|
|
<meta name="generator" content="DokuWiki"/>
|
|
<meta name="robots" content="index,follow"/>
|
|
<meta name="keywords" content="documentation,2.0,portalcustom"/>
|
|
<link rel="search" type="application/opensearchdescription+xml" href="lib/exe/opensearch.html" title="LemonLDAP::NG"/>
|
|
<link rel="start" href="portalcustom.html"/>
|
|
<link rel="contents" href="portalcustom.html" title="Sitemap"/>
|
|
<link rel="stylesheet" type="text/css" href="lib/exe/css.php.t.bootstrap3.css"/>
|
|
|
|
<link rel="stylesheet" type="text/css" href="/static/bwr/bootstrap/dist/css/bootstrap.css" />
|
|
|
|
<script type="text/javascript">/*<![CDATA[*/var NS='documentation:2.0';var JSINFO = {"id":"documentation:2.0:portalcustom","namespace":"documentation:2.0"};
|
|
/*!]]>*/</script>
|
|
<script type="text/javascript" charset="utf-8" src="lib/exe/js.php.t.bootstrap3.js"></script><!-- //if:usedebianlibs
|
|
<script type="text/javascript" src="/javascript/jquery/jquery.min.js"></script>
|
|
//elsif:useexternallibs
|
|
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
|
|
//elsif:jsminified
|
|
<script type="text/javascript" src="/static/bwr/jquery/dist/jquery.min.js"></script>
|
|
//else -->
|
|
|
|
<script type="text/javascript" src="/static/bwr/jquery/dist/jquery.js"></script><!-- //endif --><!-- //if:usedebianlibs
|
|
<script type="text/javascript" src="/javascript/jquery-ui/jquery-ui.min.js"></script>
|
|
//elsif:useexternallibs
|
|
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
|
|
//elsif:jsminified
|
|
<script type="text/javascript" src="/lib/scripts/jquery-ui.min.js"></script>
|
|
//else -->
|
|
|
|
|
|
<script type="text/javascript" src="/lib/scripts/jquery-ui.js"></script><!-- //endif -->
|
|
|
|
</head>
|
|
<body>
|
|
<div class="dokuwiki export container"><!-- TOC START -->
|
|
|
|
<div id="dw__toc">
|
|
<h3 class="toggle">Table of Contents</h3>
|
|
<div>
|
|
|
|
<ul class="toc">
|
|
<li class="level1"><div class="li"><a href="#skin">thème</a></div>
|
|
<ul class="toc">
|
|
<li class="level2"><div class="li"><a href="#default_skin">Thème par défaut</a></div></li>
|
|
<li class="level2"><div class="li"><a href="#skin_background">Skin background</a></div></li>
|
|
<li class="level2"><div class="li"><a href="#skin_rules">Règle du thème</a></div></li>
|
|
<li class="level2"><div class="li"><a href="#skin_files">Fichiers thèmes</a></div></li>
|
|
<li class="level2"><div class="li"><a href="#skin_customization">Personnalisation du thème</a></div></li>
|
|
<li class="level2"><div class="li"><a href="#messages">Messages</a></div></li>
|
|
<li class="level2"><div class="li"><a href="#template_parameters">Paramètres des modèles</a></div></li>
|
|
</ul>
|
|
</li>
|
|
<li class="level1"><div class="li"><a href="#buttons">Buttons</a></div></li>
|
|
<li class="level1"><div class="li"><a href="#password_management">Password management</a></div></li>
|
|
<li class="level1"><div class="li"><a href="#other_parameters">Autres paramètres</a></div></li>
|
|
</ul>
|
|
</div>
|
|
</div><!-- TOC END -->
|
|
|
|
|
|
<h1 class="sectionedit1" id="portal_customization">Personnalisation du portail</h1>
|
|
<div class="level1">
|
|
<div class="noteclassic">Le portail est la partie visible de LemonLDAP::NG, toutes les interactions utilisateurs y sont affichées.
|
|
</div>
|
|
</div><!-- EDIT1 SECTION "Portal customization" [1-142] -->
|
|
|
|
<h2 class="sectionedit2" id="skin">thème</h2>
|
|
<div class="level2">
|
|
|
|
<p>
|
|
|
|
LemonLDAP::NG is shipped with 4 skins:
|
|
|
|
</p>
|
|
<ul>
|
|
<li class="level1"><div class="li"> pastel</div>
|
|
</li>
|
|
<li class="level1"><div class="li"> impact</div>
|
|
</li>
|
|
<li class="level1"><div class="li"> dark</div>
|
|
</li>
|
|
<li class="level1"><div class="li"> bootstrap</div>
|
|
</li>
|
|
</ul>
|
|
<div class="notetip">It is recommended to use <code>bootstrap</code> skin, as other may be deprecated in the future.
|
|
|
|
</div>
|
|
<p>
|
|
On peut faire le sien, voir comment personnaliser le thème ci-dessous.
|
|
</p>
|
|
|
|
</div><!-- EDIT2 SECTION "Skin" [143-408] -->
|
|
|
|
<h3 class="sectionedit3" id="default_skin">Thème par défaut</h3>
|
|
<div class="level3">
|
|
|
|
<p>
|
|
On peut changer le thème par défaut dans le manager : <code>paramètres généraux</code> > <code>Portail</code> > <code>Personnalisation</code> > <code>Skin</code>.
|
|
</p>
|
|
|
|
<p>
|
|
<img src="documentation/manager-skin-selection.png" class="mediacenter" alt="" />
|
|
</p>
|
|
|
|
<p>
|
|
|
|
Select the <code>Custom</code> skin, then set the name of the skin you want to use in the input below.
|
|
|
|
</p>
|
|
|
|
</div><!-- EDIT3 SECTION "Default skin" [409-705] -->
|
|
|
|
<h3 class="sectionedit4" id="skin_background">Skin background</h3>
|
|
<div class="level3">
|
|
|
|
<p>
|
|
|
|
Go in <code>General Parameters</code> > <code>Portal</code> > <code>Customization</code> > <code>Skin background</code>. You can define a background by selecting one of the available image. Use <code>None</code> to use the default skin background configuration.
|
|
|
|
</p>
|
|
|
|
<p>
|
|
<img src="documentation/manager-skin-background.png" class="mediacenter" alt="" />
|
|
</p>
|
|
|
|
</div><!-- EDIT4 SECTION "Skin background" [706-1007] -->
|
|
|
|
<h3 class="sectionedit5" id="skin_rules">Règle du thème</h3>
|
|
<div class="level3">
|
|
|
|
<p>
|
|
On peut vouloir utiliser différents thèmes en fonction de l'<abbr title="Uniform Resource Locator">URL</abbr> demandée avant la redirection au portail ou en fonction de l'adresse <abbr title="Internet Protocol">IP</abbr> de l'utilisateur.
|
|
</p>
|
|
|
|
<p>
|
|
Pour le réaliser, il faut créer une règle dans le manager : choisir <code>paramètres généraux</code> > <code>Portail</code> > <code>Personnalisation</code> > <code>Règle d'affichage du thème</code> et cliquer sur “Nouvelle clef”. Renseigner ensuite les deux champs ;
|
|
</p>
|
|
<ul>
|
|
<li class="level1"><div class="li"> <strong>Rule</strong>: a Perl expression (you can use %ENV hash to get environment variables, or $_url to get <abbr title="Uniform Resource Locator">URL</abbr> called before redirection, or $ipAddr to use user <abbr title="Internet Protocol">IP</abbr> address). Si la règle correspond, le thème correspondant est appliqué.</div>
|
|
</li>
|
|
<li class="level1"><div class="li"> <strong>Thème</strong> : le nom du thème à utiliser.</div>
|
|
</li>
|
|
</ul>
|
|
|
|
</div><!-- EDIT5 SECTION "Skin rules" [1008-1650] -->
|
|
|
|
<h3 class="sectionedit6" id="skin_files">Fichiers thèmes</h3>
|
|
<div class="level3">
|
|
|
|
<p>
|
|
Un thème est composé de différents fichiers :
|
|
</p>
|
|
<ul>
|
|
<li class="level1"><div class="li"> <strong>.tpl</strong>: Perl <abbr title="HyperText Markup Language">HTML</abbr>::Template files, for <abbr title="HyperText Markup Language">HTML</abbr> content</div>
|
|
</li>
|
|
<li class="level1"><div class="li"> <strong>.css</strong>: <abbr title="Cascading Style Sheets">CSS</abbr> (styles)</div>
|
|
</li>
|
|
<li class="level1"><div class="li"> <strong>.js</strong>: Javascript</div>
|
|
</li>
|
|
<li class="level1"><div class="li"> images et autres médias</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
Un thème se réfère souvent au thème <code>common</code>, qui n'est pas un thème réel mais contient des objects partagés (tels les scripts, images et <abbr title="Cascading Style Sheets">CSS</abbr>).
|
|
</p>
|
|
|
|
</div><!-- EDIT6 SECTION "Skin files" [1651-1985] -->
|
|
|
|
<h3 class="sectionedit7" id="skin_customization">Personnalisation du thème</h3>
|
|
<div class="level3">
|
|
<div class="noteimportant">Les modifications apportées directement sur les fichiers thèmes risquent d'être perdus à la prochaine mise-à-jour. The best is to create your own skin, based on an existing skin.
|
|
</div>
|
|
<p>
|
|
|
|
Here we explain how to create a new skin, named <code>myskin</code>, from the <code>bootstrap</code> skin.
|
|
|
|
</p>
|
|
<pre class="code">cd /usr/share/lemonldap-ng/portal-skins/
|
|
mkdir myskin
|
|
cd myskin/
|
|
cp -a ../bootstrap/fonts/ .
|
|
cp -a ../bootstrap/js/ .
|
|
cp -a ../bootstrap/css/ .
|
|
mkdir images</pre>
|
|
|
|
<p>
|
|
Créer ensuite des liens symboliques pour éviter de réécrire tous les fichiers <abbr title="HyperText Markup Language">HTML</abbr> (sauf si c'est souhaité).
|
|
</p>
|
|
<pre class="code">ln -s ../bootstrap/*.tpl .</pre>
|
|
|
|
<p>
|
|
Nous incluons des fichiers modèles qui peuvent être personnalisés :
|
|
</p>
|
|
<ul>
|
|
<li class="level1"><div class="li"> customhead.tpl : en-têtes <abbr title="HyperText Markup Language">HTML</abbr> (tels les inclusions <abbr title="Cascading Style Sheets">CSS</abbr>, js)</div>
|
|
</li>
|
|
<li class="level1"><div class="li"> customheader.tpl : code <abbr title="HyperText Markup Language">HTML</abbr> inséré dans le div d'en-tête</div>
|
|
</li>
|
|
<li class="level1"><div class="li"> customfooter.tpm : code <abbr title="HyperText Markup Language">HTML</abbr> inséré dans le div de pied-de-page</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
Pour utiliser des fichiers personnalisés, effacer les liens et copier les fichiers dans le répertoire du thème :
|
|
</p>
|
|
<pre class="code">rm -f custom*
|
|
cp ../bootstrap/custom* .</pre>
|
|
|
|
<p>
|
|
|
|
Create a symlink in main skin directory:
|
|
|
|
</p>
|
|
<pre class="code">ln -s /usr/share/lemonldap-ng/portal-skins/myskin /var/lib/lemonldap-ng/portal/skins/</pre>
|
|
|
|
<p>
|
|
Then you <em>only</em> have to edit JS/<abbr title="Cascading Style Sheets">CSS</abbr> and add your media to <code>myskin/images</code>. Mettre tous les codes <abbr title="HyperText Markup Language">HTML</abbr> personnalisés dans les fichiers modèles personnalisés.
|
|
</p>
|
|
|
|
<p>
|
|
Pour configurer le nouveau thème dans le manager, selectionner le thème personnalisé et entrer le nom du nouveau thème dans le champ.
|
|
</p>
|
|
|
|
</div><!-- EDIT7 SECTION "Skin customization" [1986-3376] -->
|
|
|
|
<h3 class="sectionedit8" id="messages">Messages</h3>
|
|
<div class="level3">
|
|
|
|
<p>
|
|
Messages are defined in source code. S'ils ne conviennent pas, il peuvent être surchargés. You just need to know the ID of the message (look at Portal/Simple.pm) and then add to <code>lemonldap-ng.ini</code>:
|
|
</p>
|
|
<pre class="code file ini"><span class="re0"><span class="br0">[</span>portal<span class="br0">]</span></span>
|
|
|
|
# Custom error messages
|
|
<span class="re1">error_0</span> <span class="sy0">=</span><span class="re2"> Big brother is watching you, authenticated user</span>
|
|
|
|
# Custom standard messages
|
|
<span class="re1">msg_22</span> <span class="sy0">=</span><span class="re2"> Your last connections</span></pre>
|
|
<div class="notetip">You can alse define messages in several languages:
|
|
|
|
<pre class="code file ini"><span class="re0"><span class="br0">[</span>portal<span class="br0">]</span></span>
|
|
<span class="re1">error_en_0</span> <span class="sy0">=</span><span class="re2"> Big brother is watching you, authenticated user</span>
|
|
<span class="re1">error_fr_0</span> <span class="sy0">=</span><span class="re2"> Souriez vous êtes surveillés !</span></pre>
|
|
|
|
</div>
|
|
</div><!-- EDIT8 SECTION "Messages" [3377-3968] -->
|
|
|
|
<h3 class="sectionedit9" id="template_parameters">Paramètres des modèles</h3>
|
|
<div class="level3">
|
|
|
|
<p>
|
|
Des paramètres modèles sont définis dans le code source. Pour ajouter un paramètre de modèle, l'ajouter dans <code>lemonldap-ng.ini</code>:
|
|
</p>
|
|
<pre class="code file ini"><span class="re0"><span class="br0">[</span>portal<span class="br0">]</span></span>
|
|
|
|
# Custom template parameters
|
|
<span class="re1">tpl_myparam</span> <span class="sy0">=</span><span class="re2"> world</span></pre>
|
|
|
|
<p>
|
|
On peut ensuite l'utiliser dans le modèle comme suit :
|
|
</p>
|
|
<pre class="code file html4strict">Hello <span class="sc2"><TMPL_VAR <span class="kw3">NAME</span><span class="sy0">=</span><span class="st0">"myparam"</span>></span>!</pre>
|
|
|
|
</div><!-- EDIT9 SECTION "Template parameters" [3969-4339] -->
|
|
|
|
<h2 class="sectionedit10" id="buttons">Buttons</h2>
|
|
<div class="level2">
|
|
|
|
<p>
|
|
|
|
This node allows one to enable/disable buttons on the login page:
|
|
|
|
</p>
|
|
<ul>
|
|
<li class="level1"><div class="li"> <strong>Vérifier l'historique</strong> : affiche une case à cocher sur le formulaire d'authentification permettant à l'utilisateur d'examiner son historique de connexion après l'ouverture de la session</div>
|
|
</li>
|
|
<li class="level1"><div class="li"> <strong>Reset password</strong>: display a link to <a href="resetpassword.html" class="wikilink1" title="documentation:2.0:resetpassword">reset your password page</a> (for password based authentication backends)</div>
|
|
</li>
|
|
<li class="level1"><div class="li"> <strong>Register</strong>: display a link to <a href="register.html" class="wikilink1" title="documentation:2.0:register">register page</a> (for password based authentication backends)</div>
|
|
</li>
|
|
</ul>
|
|
|
|
</div><!-- EDIT10 SECTION "Buttons" [4340-4797] -->
|
|
|
|
<h2 class="sectionedit11" id="password_management">Password management</h2>
|
|
<div class="level2">
|
|
<ul>
|
|
<li class="level1"><div class="li"> <strong>Exige l'ancien mot-de-passe</strong> : utilisé seulement dans le module de changement du mot-de-passe du menu, vérifie l'ancien mot-de-passse avant de le changer</div>
|
|
</li>
|
|
<li class="level1"><div class="li"> <strong>Hide old password</strong>: used only if the password need to be reset by the user (LDAP password policy), will hide the old password input</div>
|
|
</li>
|
|
<li class="level1"><div class="li"> <strong>Send mail on password change</strong>: send a mail if the password is changed from the Menu, or from forced password reset (LDAP password policy)</div>
|
|
</li>
|
|
</ul>
|
|
|
|
</div><!-- EDIT11 SECTION "Password management" [4798-5248] -->
|
|
|
|
<h2 class="sectionedit12" id="other_parameters">Autres paramètres</h2>
|
|
<div class="level2">
|
|
<ul>
|
|
<li class="level1"><div class="li"> <strong>Attribut utilisateur</strong> : attribut de session à utiliser pour afficher <code>Connecté en tant que</code> dans le menu</div>
|
|
</li>
|
|
<li class="level1"><div class="li"> <strong>Nouvelle fenêtre</strong> : ouvre les liens du menu dans de nouvelles fenêtres</div>
|
|
</li>
|
|
<li class="level1"><div class="li"> <strong>Protection anti-iframe</strong> : ferme la frame parente pour éviter des attaques bien connues</div>
|
|
</li>
|
|
<li class="level1"><div class="li"> <strong>Ping interval</strong>: Number of milliseconds between each ping (Ajax request) on the portal menu. Set to 0 to dismiss checks.</div>
|
|
</li>
|
|
</ul>
|
|
|
|
</div><!-- EDIT12 SECTION "Other parameters" [5249-] -->
|
|
</div>
|
|
</body>
|
|
</html>
|