lemonldap-ng/doc/pages/documentation/1.9/portalcustom.html
2015-12-18 09:46:34 +00:00

258 lines
10 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!-- metadata -->
<meta name="generator" content="Offline" />
<meta name="version" content="Offline 0.1" />
<!-- style sheet links -->
<link rel="stylesheet" media="all" type="text/css" href="../../../css/all.css" />
<link rel="stylesheet" media="screen" type="text/css" href="../../../css/screen.css" />
<link rel="stylesheet" media="print" type="text/css" href="../../../css/print.css" />
</head>
<body>
<div class="dokuwiki export">
<h1 class="sectionedit1" id="portal_customization">Portal customization</h1>
<div class="level1">
<p>
<p><div class="noteclassic">The portal is the visible part of LemonLDAP::NG, all user interactions are displayed on it.
</div></p>
</p>
</div>
<!-- EDIT1 SECTION "Portal customization" [1-142] -->
<h2 class="sectionedit2" id="skin">Skin</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>
<p>
<p><div class="notetip">It is recommended to use <code>bootstrap</code> skin, as other may be deprecated in the future.
</div></p>
</p>
<p>
But you can make your own, see Skin customization below.
</p>
</div>
<!-- EDIT2 SECTION "Skin" [143-408] -->
<h3 class="sectionedit3" id="default_skin">Default skin</h3>
<div class="level3">
<p>
You can change the default skin in Manager: <code>General Parameters</code> &gt; <code>Portal</code> &gt; <code>Customization</code> &gt; <code>Default skin</code>.
</p>
<p>
<a href="/_detail/documentation/manager-2-portalskin.png?id=documentation%3A1.9%3Aportalcustom" class="media" title="documentation:manager-2-portalskin.png"><img src="../../../media/documentation/manager-2-portalskin.png" class="mediacenter" alt="" /></a>
</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-696] -->
<h3 class="sectionedit4" id="skin_background">Skin background</h3>
<div class="level3">
<p>
Go in <code>General Parameters</code> &gt; <code>Portal</code> &gt; <code>Customization</code> &gt; <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="../../../media/documentation/manager-2-skinbackground.png" class="mediacenter" alt="" />
</p>
</div>
<!-- EDIT4 SECTION "Skin background" [697-999] -->
<h3 class="sectionedit5" id="skin_rules">Skin rules</h3>
<div class="level3">
<p>
You might want to display different skin depending on the <abbr title="Uniform Resource Locator">URL</abbr> that was called before being redirected to the portal, or the <abbr title="Internet Protocol">IP</abbr> address of the user.
</p>
<p>
To achieve this, you can create a rule in the Manager: select <code>General Parameters</code> &gt; <code>Portal</code> &gt; <code>Customization</code> &gt; <code>Skin display rules</code> on click on “New key”. Then fill the two fields;
</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). If the rule evaluation is true, the corresponding skin is applied.</div>
</li>
<li class="level1"><div class="li"> <strong>Skin</strong>: the name of the skin to use.</div>
</li>
</ul>
</div>
<!-- EDIT5 SECTION "Skin rules" [1000-1642] -->
<h3 class="sectionedit6" id="skin_files">Skin files</h3>
<div class="level3">
<p>
A skin is composed of different files:
</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 and other media files</div>
</li>
</ul>
<p>
A skin will often refer to the <code>common</code> skin, which is not a real skin, but shared skin objects (like scripts, images and <abbr title="Cascading Style Sheets">CSS</abbr>).
</p>
</div>
<!-- EDIT6 SECTION "Skin files" [1643-1977] -->
<h3 class="sectionedit7" id="skin_customization">Skin customization</h3>
<div class="level3">
<p>
<p><div class="noteimportant">If you modify directly the skin files, your modifications will certainly be erased on the next upgrade.
</div></p>
</p>
<p>
To customize a skin, the simplest way is to create a new skin folder:
</p>
<pre class="code">cd portal/skins
mkdir myskin
mkdir myskin/css
mkdir myskin/images</pre>
<p>
Then create symbolic links on template files, as you might not want to rewrite all <abbr title="HyperText Markup Language">HTML</abbr> code (else, do as you want).
</p>
<pre class="code">cd myskin
ln -s ../pastel/*.tpl .</pre>
<p>
We include some template files that can be customized:
</p>
<ul>
<li class="level1"><div class="li"> customhead.tpl : <abbr title="HyperText Markup Language">HTML</abbr> header markups (like <abbr title="Cascading Style Sheets">CSS</abbr>, js inclusion)</div>
</li>
<li class="level1"><div class="li"> customheader.tpl : <abbr title="HyperText Markup Language">HTML</abbr> code int the header div</div>
</li>
<li class="level1"><div class="li"> customfooter.tpm : <abbr title="HyperText Markup Language">HTML</abbr> code in the footer div</div>
</li>
</ul>
<p>
To use custom files, delete links and copy them into your skin folder:
</p>
<pre class="code">rm custom*
cp ../pastel/custom* .</pre>
<p>
Then you <em>only</em> have to write <code>myskin/css/styles.css</code> and add your media to <code>myskin/images</code>. Put all custom <abbr title="HyperText Markup Language">HTML</abbr> code in the custom template files.
</p>
<p>
To configure your new skin in Manager, select the custom skin, and enter your skin name in the configuration field.
</p>
</div>
<!-- EDIT7 SECTION "Skin customization" [1978-3072] -->
<h3 class="sectionedit8" id="error_messages">Error messages</h3>
<div class="level3">
<p>
Error messages are defined in source code. If they really do not please you, override them! You just need to know the ID of the error (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">&#91;</span>portal<span class="br0">&#93;</span></span>
&nbsp;
# Custom error messages
<span class="re1">error_0</span> <span class="sy0">=</span><span class="re2"> Big brother is watching you, authenticated user</span></pre>
</div>
<!-- EDIT8 SECTION "Error messages" [3073-3410] -->
<h3 class="sectionedit9" id="template_parameters">Template parameters</h3>
<div class="level3">
<p>
Template parameters are defined in source code. If you need to add a template parameter for your customization, then add to <code>lemonldap-ng.ini</code>:
</p>
<pre class="code file ini"><span class="re0"><span class="br0">&#91;</span>portal<span class="br0">&#93;</span></span>
&nbsp;
# Custom template parameters
<span class="re1">tpl_myparam</span> <span class="sy0">=</span><span class="re2"> world</span></pre>
<p>
Then you will be able to use it in your template like this:
</p>
<pre class="code file html4strict">Hello <span class="sc2">&lt;TMPL_VAR <span class="kw3">NAME</span><span class="sy0">=</span><span class="st0">&quot;myparam&quot;</span>&gt;</span>!</pre>
</div>
<!-- EDIT9 SECTION "Template parameters" [3411-3781] -->
<h2 class="sectionedit10" id="buttons">Buttons</h2>
<div class="level2">
<p>
This node allows to enable/disable buttons on the login page:
</p>
<ul>
<li class="level1"><div class="li"> <strong>Check last logins</strong>: displays a checkbox on login form, allowing user to check his login history right after opening session</div>
</li>
<li class="level1"><div class="li"> <strong>Reset password</strong>: display a link to <a href="../../documentation/1.9/resetpassword.html" class="wikilink1" title="documentation:1.9: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="../../documentation/1.9/register.html" class="wikilink1" title="documentation:1.9:register">register page</a> (for password based authentication backends)</div>
</li>
</ul>
</div>
<!-- EDIT10 SECTION "Buttons" [3782-4235] -->
<h2 class="sectionedit11" id="password_management">Password management</h2>
<div class="level2">
<ul>
<li class="level1"><div class="li"> <strong>Require old password</strong>: used only in the password changing module of the menu, will check the old password before updating it</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" [4236-4686] -->
<h2 class="sectionedit12" id="other_parameters">Other parameters</h2>
<div class="level2">
<ul>
<li class="level1"><div class="li"> <strong>User attribute</strong>: which session attribute will be used to display <code>Connected as</code> in the menu</div>
</li>
<li class="level1"><div class="li"> <strong>New window</strong>: open menu links in new window</div>
</li>
<li class="level1"><div class="li"> <strong>Anti iframe protection</strong>: will kill parent frames to avoid some well known attacks</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>
</div><!-- closes <div class="dokuwiki export">-->