Customize and Use Mendix Login Page

0
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.   
asked
4 answers
3

Hi,

you can take the following course, which contains creating a custom login page: https://gettingstarted.mendixcloud.com/link/path/56/Create-an-App-with-Advanced-Page-Building

Success

answered
1
  • 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’.

 

answered
1

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

answered
0

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

<myapp>\themesource\atlas_core\web\core\base\_login.scss

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%)

 

answered