The instructions below well help you to install and configure the “Invite Login” layout in your app. Utilizing this layout helps to ensure that all of your app users have an account, and if they don’t, there’s an option for them to create one.

1) Login to the App Manager.

2) Select your app.

3)Select Design from the left-hand-side of the screen (or from the middle of the screen).

4)Click Change Your Layout and select Invite Login.

5) Click the Image Slide button to add your logo to the Login screen. Add an image and text for each slide. Edit the other settings accordingly. Click “Save” when done.

The below image shows how the colors is affected on the Menu screen (when someone selects “More”):

6) Click the Colors link on the left-hand-side of the screen (or the middle of the screen).

Sample of completed login screen:

ADDITIONAL EDITS

Place the code below in the Advanced SCSS section (click Color then scroll down) for additional edits.

Change Placeholder Text:

/*** BEGIN: INVITE LOGIN - EDIT PLACEHOLDER TEXT ***/
.layout_baguera_13 *::placeholder {
color: #ffffff;
}
/*** END: INVITE LOGIN - EDIT PLACEHOLDER TEXT ***/

Modify Image Height:

/*** BEGIN: INVITE LOGIN - MODIFY MENU HEIGHT ***/
.layout_baguera_12 .menu-icon {
height: 10vh !important;
}
/*** END: INVITE LOGIN - MODIFY MENU HEIGHT ***/

You may also need to add this css (using the same height of the image) or the image will overlap feature text:

.layout_baguera_12 .menu-icon-div {
height: 10vh !important;
}

Increase Image Size of the Icons On Main Screen:

/*** BEGIN: INVITE LOGIN - INCREASE IMAGE SIZE ***/

.layout_baguera_13 .menu-icon {

height: 10vh !important;

}
/*** END: INVITE LOGIN - INCREASE IMAGE SIZE ***/

You may also need to add this css (using the same height of the image) or the image will overlap feature text:

.layout_baguera_13 .menu-icon-div {
height: 10vh !important;
}

Increase Image Size of the Icons Under “More”:

/*** BEGIN: INVITE LOGIN - INCREASE IMAGE SIZE UNDER MORE ***/
.layout.l10.modal.slide-top img {
height: 10vh;
width: auto;
}
/*** END: INVITE LOGIN - INCREASE IMAGE SIZE UNDER MORE ***/

Change “Forgot Password” Text Color:

/*** BEGIN: INVITE LOGIN - CHANGE FORGOT PASSWORD TEXT COLOR ***/
.layout_baguera_13 .forgot-link {
color: #ffffff;
}
/*** END: INVITE LOGIN - CHANGE FORGOT PASSWORD TEXT COLOR ***/