Customize Login Page

The stock login page has one fixed layout and no branding options. This module adds settings to choose the login layout (default, left, right or middle) and the background as image, colour or gradient, and a library of login images. Custom login templates and a login controller render the choice for both backend and website logins. Administrators use it to brand the entry point without code.

1. 1

   Upload login images

   Open the Login Image menu and create records with a name and an image. A list and a form view are provided. These images become choices for the background.

   • Model: login.image
   • Fields: Name, Image
2. 2

   Choose the login style

   In general settings pick Style: Default, Left, Right or Middle. An onchange resets dependent fields. The choice decides which login template is rendered.

   • Field: Style
   • Templates left, middle, right
3. 3

   Choose the background type

   Select Background as Image, Color or Gradient. For Image pick a login image. For Color or Gradient choose the colour values.

   • Fields: Background, Image, Color
   • Gradient colours bgcolor_1..3
4. 4

   Save settings

   Save the settings so values are stored as system parameters. The get and set methods handle them. The next login page load reflects them.

   • Stored as config parameters
   • Applies on next load
5. 5

   Login controller renders the layout

   The overridden web login route selects the template from the stored style. It also handles the website login variant. Redirect after login works as normal.

   • Route /web/login overridden
   • Website login supported
6. 6

   Test the result

   Open the login page in a private window and check each style. Try a mobile width too. Demo data provides sample values.

   • Check all four styles
   • Demo data available

Back to version applications