Main Logo

You can change the default Main Logo in Manager: General Parameters >Portal > Customization > Main logo.

A blank value disables Main logo display.

Favicon

You can change the default favicon in Manager: General Parameters >Portal > Customization > Favicon.

A blank value displays default faviconcommon/favicon.ico.

Show languages choice

You can disabled languages choice in Manager: General Parameters >Portal > Customization > Show languages choice.

Option enabled by default.

Scroll to top button

You can display a button to go to back to the top after <value> pixels scrolling.

Floating category name

You can display an applications category as a floating menu by specifying its categoryname.Example:Sampleapplications.

Custom CSS file

You can define a custom CSS file, for examplecustom.css, which willbe loaded after default CSS files. This file must be created in the static repository(By default:/usr/share/lemonldap-ng/portal/htdocs/static/).

Then set this value in Custom CSS parameter:bootstrap/css/custom.css.

CSS file example to remove white background of main logo:

#headerimg{background-color:transparent;}

Custom JS file

Similarly, you can define a custom JS file, for examplecustom.js, which willbe loaded after default JS files. This file must be created in the static repository(By default:/usr/share/lemonldap-ng/portal/htdocs/static/).

Then set this value in Custom JS parameter:bootstrap/js/custom.js.

Check out theAvailable JQuery Events page for available integrations

Some javascript functions are exported by LemonLDAP:

• translate(msg): lookup the value of the translation labelmsg in the current language

Default skin

You can change the default skin in Manager:GeneralParameters >Portal >Customization >Defaultskin.

Select theCustom skin, then set the name of the skin you want touse in the input below.

Skin background

Go inGeneralParameters >Portal >Customization >Skinbackground. You can define a background by selecting one of theavailable image. SelectNone to use the default skin background configuration.

To set your own background, copy your file in/usr/share/lemonldap-ng/portal/htdocs/static/common/backgrounds/ andregister it in/etc/lemonldap-ng/lemonldap-ng.ini:

[portal]portalSkinBackground=file.png

You can also uselemonldap-ng-cli:

/usr/share/lemonldap-ng/bin/lemonldap-ng-clisetportalSkinBackgroundfile.png

Skin rules

You might want to display different skin depending on the URL that wascalled before being redirected to the portal, or the IP address of theuser.

To achieve this, you can create a rule in the Manager: selectGeneralParameters >Portal >Customization >Skindisplayrules and click on “New entry”. Then fill the two fields;

• Key: a Perl expression (you can use%ENV hash to get environmentvariables, or$_url to get URL called before redirection, or$ipAddrto use user IP address). If the rule evaluation is true, the correspondingskin is applied.

• Value: the name of the skin to use.

Example:

$_url =~ m#^http://test1.example.com#

Skin files

A skin is composed of different files:

• .tpl: PerlHTML::Template files, for HTML content

• .css: CSS (styles)

• .js: Javascript

• images and other media files

A skin will often refer to thecommon skin, which is not a realskin, but shared skin objects (like scripts, images and CSS).

Skin customization

Here we explain how to create a new skin, namedmyskin, from thebootstrap skin.

First copy static content:

cd/usr/share/lemonldap-ng/portal/htdocs/staticmkdirmyskincdmyskin/cp-a../bootstrap/js/.cp-a../bootstrap/css/.mkdirimages

Then create a folder for template overrides

cd/usr/share/lemonldap-ng/portal/templates/mkdirmyskincdmyskin/

LemonLDAP::NG contains templates that are made for common customization, theseparticular templates do not need any modification when you upgradeLemonLDAP::NG:

• customhead.tpl : HTML header markups (like CSS, js inclusion)

• customheader.tpl : HTML code in the header

• customfooter.tpl : HTML code in the footer

• customLoginHeader.tpl : HTML code in the login header

• customLoginFooter.tpl : HTML code in the login footer

To use override these files, copy them into your skin folder:

cp../bootstrap/custom*.

Any other template file can also be overriden, be sure you checkupgrade notes for important updates in your overriden templatefiles.

Then you can add your media tomyskin/images, you will be able touse them in HTML template with this code:

<imgsrc="<TMPL_VAR NAME="STATIC_PREFIX">myskin/images/logo.png"class="mx-auto d-block"/>

To change CSS, two options:

• Edit myksin/css/styles.css and myskin/css/styles.min.css

• Create a new CSS file, for example myskin/css/myskin.css and load itin customhead.tpl:

<linkhref="<TMPL_VAR NAME="STATIC_PREFIX"><TMPL_VAR NAME="SKIN">/css/myskin.css"rel="stylesheet"type="text/css"/>

To add custom JS, create a new file in myskin/js/custom.js and load it in customhead.tpl

<scripttype="text/javascript"src="<TMPL_VAR NAME="STATIC_PREFIX"><TMPL_VAR NAME="SKIN">/js/custom.js"></script>

In this file, you can access JQuery functions, and hook your code toJQuery events

Put then all custom HTML code in the custom template files.

To configure your new skin in Manager, select the custom skin, and enteryour skin name in the configuration field. For example withlemonldap-ng-cli:

/usr/share/lemonldap-ng/bin/lemonldap-ng-cli-yes1setportalSkin'myskin'portalSkinBackground''

You can find additional documentation on the syntax of template files in theofficial documentation of the HTML::Template module

Messages

[portal]# Custom error messageserror_0=Big brother is watching you, authenticated user# Custom standard messagesmsg_lastLogins=Your last connections

error_en_0=Big brother is watching you, authenticated usererror_fr_0=Souriez, vous êtes surveillés !msg_fr_lastLogins=Dernières connexionserror_9=_hide_

{"PE9":"Please authenticate!","lastLogins":"Previous authentications","myMessage":"My custom message, in english"}

<spantrspan="myMessage">ThiswillbereplacedbythetranslationofmyMessage</span>

<imgsrc="http://xxx"trattribute="alt:myMessage data-description:myMessage"></img>

Menu tabs

If you modify the menu template to add some tabs, you should add the newtabs in `customMenuTabs` parameter in lemonldap-ng.ini:

[portal]customMenuTabs=test, test2

This will allow one to display the tab directly with this URL:http://auth.example.com/?tab=test

Template parameters

Template parameters are defined in source code. If you need to add atemplate parameter for your customization, then add tolemonldap-ng.ini:

[portal]# Custom template parameterstpl_myparam=world

Then you will be able to use it in your template like this:

Hello<TMPL_VARNAME="myparam">!

All session variables are also available in templates, with the prefixsession_:

Hello<TMPL_VARNAME="session_cn">!

You can also display environment variables, with the prefixenv_:

Your IP is<TMPL_VARNAME="env_REMOTE_ADDR">