How to Customize Login Page

1. Find the template file

To begin, our first task is to identify the specific file that controls the login page template within the system. This particular file is typically located in a directory or folder within the system's file structure. This file is situated within ./Services/Init/templates/tpl.login-html

2. Copy the template file

Our next step involves copying this file to a new destination where customizations can be safely applied.

Navigate to the desired system style directory, in our case ./Customizing/global/skin/iliaspedia/Services/Init, and paste the tpl.login-html file here. This new location within the Customizing directory structure ensures that any modifications made to this template will not be overridden during system updates or maintenance.

3. Edit the template file

Use a text editor or integrated development environment (IDE) to open the tpl.login-html file for editing. This file contains the HTML that generates the login page layout.

To add a new column with an image next to the login form, we insert the necessary HTML code next to {LOGIN_FORM}. The {LOGIN_FORM} is coming from PHP and generates the HTML of the login form. Here's an example of how you might structure this addition:

<!-- BEGIN login_information -->
<div class="small">{TXT_LOGIN_INFORMATION}</div>
<!-- END login_information -->

<div>
    <!-- BEGIN login_page_editor -->
    {LPE}
    <!-- END login_page_editor -->
</div>

<div class="ilStartupSection">
    <!-- BEGIN shib_login_form -->
    <p>
        {SHIB_LOGIN_FORM}
    </p>
    <!-- END shib_login_form -->
    <!-- BEGIN saml_login -->
    {SAML_LOGIN_FORM}
    <!-- END saml_login -->
    <!-- BEGIN cas_login -->
    <p>
        {CAS_LOGIN_FORM}
    </p>
    <!-- END cas_login -->
    <!-- BEGIN oidc_login -->
    {OPEN_ID_CONNECT_LOGIN_FORM}
    <!-- END oidc_login -->

    <div class="container-fluid container-image-form">
        <div class="col-sm-6 container-image">
            <img src="./Customizing/global/skin/iliaspedia/images/login-page-image.jpg">
        </div>
        <div class="col-sm-6 container-form">
            <!-- BEGIN ilias_login -->
            {LOGIN_FORM}
            <!-- END ilias_login -->
            <!-- BEGIN reg_links -->
            <div class="ilStartupSection">
                {REG_PWD_CLIENT_LINKS}
            </div>
            <!-- END reg_links -->
        </div>
    </div>

    <!-- BEGIN agreement -->
    <div class="ilStartupSection">
        {USER_AGREEMENT}
    </div>
    <!-- END agreement -->
</div>

4. Define CSS Styles for New Elements

Within the iliaspedia.less file, we add CSS styles to target and modify the newly added elements in the tpl.login-html template. Below is an example of how you can style the columns and image:

@import "../../../../templates/default/delos";
@import "iliaspedia-variables.less";

.container-image-form  {
  height: 500px;
}
.container-image  {
  height: 100%;

  img  {
     height: 100%;
  }
}

.container-form  {
  form  {
    margin-top: 150px;
  }
}

5. Select skin as default

To ensure that the customizations made to the login page in ILIAS are visible, it's important to set our custom skin as the default skin. We can accomplish this by navigating to Administration > Layout & Styles  and choosing our custom skin as the default skin.

Finally, we navigate to the login page in your ILIAS LMS environment to see the applied customization. We verify that the new column with the image appears next to the login form as intended.

Conclusion

In conclusion, customizing templates in ILIAS LMS opens up a world of possibilities for educators and institutions seeking to personalize their e-learning environments. Whether you're aiming to create a seamless brand experience, optimize functionality, or enhance engagement, customization empowers you to tailor your LMS to your precise specifications.

Have you customized ILIAS templates before? Share your experiences and insights in the comments below!