Customize and Use Mendix Login Page

I really like the new Mendix Default Login page and I’d like to use this in my application, but customized. I have Anonymous users enabled, so I can create a customized login page, but how do I use and modify the page pictured below? For example I’d like to change the logo, background image and add a forgot password and sign-up button.   
5 answers

Although this was initially asked quite sometime ago I thought I’d provide a simple way to achieve this based on the Atlas 3 design system.

The background image is defined by the class loginpage-image in the following folder


You don’t want to change anything in the atlas_core folder directly though, instead you can override the class in your <myapp>\theme\web folder in the “main.scss” file

Open “main.scss” and add the following class definition and then change the image / display properties to your desired requirements.  This is a direct copy of the class definition in atlas_core.

// Image and clipping mask
.loginpage-image {
    height: 100%;
    animation: makePointer 1s ease-out both;
    background: left / cover no-repeat
        linear-gradient(to right, rgba($brand-primary, 0.9) 0%, rgba($brand-primary, 0.6) 100%),
        left / cover no-repeat url("../../resources/work-do-more.jpeg");
    -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 50%, 100% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 100% 0, 100% 50%, 100% 100%, 0% 100%);

For reference the default Do More image is 2515px x 2300px

You can change the intensity of the primary brand colour overlay by adjusting the the linear-gradient parameters below, for example change them to 0.6 and 0.3 respectively to have less colour overlay.

linear-gradient(to right, rgba($brand-primary, 0.9) 0%, rgba($brand-primary, 0.6) 100%)




you can take the following course, which contains creating a custom login page:


  • In Studio click Project->’Show Project Directory in Explorer’
  • go to directory ‘resources’
  • open login.html

You can customize this as you like. You will see the left background image has class ‘loginpage-image’ and the loginpage’s logo has class ‘loginpage-logo’.



Heyy, I see that this topic is already a little old but my problem is the same. Did you solve it?


If you still has this problem, just follow below.

- Duplicate the default login layout. Give a new name and then double click on the image and just change the image. (If you don’t know how to add images — go to images folder in your module and add a new image there)

- Create a page for your  custom login in your module and use this newly created layout.

then you can use the default login page with a new image as customised.