Custom login pages

Web page design packages contain resources for web pages. Learn how to create and configure a web design package for a custom login page here.

Changed behavior

Note that as of censhare 2021.2.x, the customization of the login page has changed as the login is now managed by Keycloak. For more information, see Create custom theme for Keycloak.

Context

Web page design packets are stored in a ZIP file in a Web page asset.

Introduction

Custom login pages for censhare Web allow you to give the login screen a unique look and feel according to your corporate design. You can include dynamic and interactive elements with JavaScript, include your own fonts, images and styles. The custom login page is displayed in an iframe that replaces the default layout.

Configuration

Create the resources for the web page

The minimal configuration consists of an HTML file. Further resources like images, fonts, stylesheets or JavaScript can be stored in their own files and referenced in the HTML file:

Create your HTML layout for the login page. The code must not contain a document type declaration. Here is an example of a simple login page:

CODE

<html>
   <head>
      <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="csLogin.css">
   </head>
   <body>
      <div class=login-content>
         <h1 class="login-header">censhare Web</h1>
         <p class=login-text">
            The censhare collaboration tools provide diverse <br/>
            possibilities to enhance the censhare system <br/>
            and adapt it to your individual requirements <br/>
            and needs.
         </p>
      </div>
   </body>
</html>

Save the file as index.html.
Create the additional resources. For the example above, a stylesheet csLogin.css is required. If the stylesheet contains font definitions or background images, these are also required for the web design packet.
Create a ZIP archive with all the resources. The index.html must be on top level in the ZIP archive. Other resources can be stored in folders, for example img for images. Make sure to use the correct paths in the index.html to reference these resources.

Create a web page asset and upload the resources

In censhare Web, create a new asset and select the asset type Web page.
Enter a name, save the asset and open it.
In the Overview tab, click
in the Files widget, select the ZIP archive with the resources and upload it.
If necessary, adjust the properties of the Web page asset.

Assign the web page asset to the system

Web page assets can be assigned as custom login pages to a branding. For more information see Branding.

Result

You have created a Web page asset with a web page design packet that can be assigned as a custom login page.