# Access screens

> The look of the login, sign-up and password recovery screens: model, logo, color and side image, with a preview before you save.

The access screens are the student's first contact with your platform. There are six: login, sign-up, password recovery, new password, two-factor verification and sign-up complete. In **Settings > Access screens** you choose the visual model of those screens, the logo, the color and the side image. Then you check the result before you save.

## What this screen changes and what it does not

This screen changes only the look. The rest lives on other screens:

- **Entry rules** (strong passwords, Google login, device limit): [Authentication](https://help.cademi.cloud/en/configuracoes/autenticacao.md), under Access & security.
- **Free sign-up**: **Settings > Students > Free registration** ([Student settings](https://help.cademi.cloud/en/configuracoes/cadastro-de-alunos.md)).
- **Footer of the access screens**: **Settings > Student area > Footer** ([Student area](https://help.cademi.cloud/en/configuracoes/area-do-aluno.md)).

**The most important rule:** nothing changes for students until you click **Save now** in the footer bar. Before you save, use **Preview** to see the real screens with the chosen model.

## Model

In **Model**, the question **Which model does this platform use?** shows four cards:

| Model | What it looks like |
|---|---|
| **Classic** | The layout with an image panel next to the form |
| **Aurora** | Dark gradient background, with the form on a translucent card |
| **Stage** | Dark background with the form centered inside a colored ring |
| **Editorial** | Light two-column layout, with the highlight sentence in large type |

Each model has its own background. If you choose a model other than Classic, the screen shows two warnings:

- Use the preview to check that your logo reads well on the background. Aurora and Stage are dark, Editorial is light, and the uploaded image is the same for all.
- Custom code written for the Classic model may need to be revised.

**Highlight sentence** appears only in the Aurora and Editorial models, next to the form. It has up to 120 characters. With the field blank, the model's own sentence appears: "All your content, in one place." in Aurora and "Learn at your own pace." in Editorial. In Aurora, the sentence only appears on wide screens.

## Logo

In **Logo**, upload the **Image** that appears at the top of the login, sign-up and password-recovery screens. JPG or PNG, up to 200 kb.

- **Alignment**: **Left**, **Center** or **Right**.
- **Height**: from 20 to 120 px.

With no logo uploaded, the screens show Cademí's default brand.

## Form and buttons

- **Form side**: **Left** or **Right**, on larger screens. Only in the Classic and Editorial models. Aurora and Stage have a fixed position.
- **Light or dark mode**: **Follow the student area**, **Light** or **Dark**. It applies to all four models. With **Follow the student area**, the screens match the student area's **Display mode**.
- **Accent color**: the color of the buttons, the links and the background of the access screens, in all four models.

How the **Accent color** works:

- With the field empty, the screens follow the student area accent color. The screen shows **Following the student area accent color.**
- If you pick a color (with the picker or from the **Suggested colors**), the screens use that color.
- **Use the student area color** clears the field. The screens follow the student area again.
- The **Preview** right below shows the **Log in** button and the **Forgot my password** link in the chosen color, also on hover.

## Visual panel

The panel is the part shown next to the form on larger screens.

- **Visual-panel image**: the panel's image. JPG, 1280x1024, up to 850 kb.
- **Image position**: **Left**, **Center** or **Right**. It is the part of the image kept in view in the panel.
- **Panel width**: Classic model only. **Narrow**, **Default**, **Medium**, **Wide** or **Very wide**.

## Step by step

To change the look of the screens:

1. In the dashboard, open **Settings > Access screens**.
2. In **Model**, click the model's card. The description below the cards changes with your choice.
3. Click **Preview**.
4. In the preview bar, switch between the screens.
5. Go back to the dashboard and adjust **Logo**, **Form and buttons** and **Visual panel**.
6. Click **Save now**.

The preview opens in a new tab, with the chosen model and the colors already saved. A bar says the model is not published yet. In it, you switch between **Login**, **Sign-up**, **Forgot password**, **New password**, **Two-factor verification** and **Sign-up complete**. After you save, students see the new look.

**Heads up: the preview uses the colors and the logo already saved.** Pedro picks a new color and opens the preview. The new color does not show, because he has not saved yet. To see a new color on the real screens, save before you preview again.

## Good to know

- **The preview is not the publication.** Nothing changes for students until you save. The preview shows the model chosen right now, but the colors and the logo are the saved ones.
- **Pixels and custom code may not appear in the preview.** It shows the screens, not the tracking codes.
- **Sign-up screen.** It only takes in students if free sign-up is on in **Settings > Students > Free registration** ([Student settings](https://help.cademi.cloud/en/configuracoes/cadastro-de-alunos.md)). Its look, though, is set here, together with the other screens. The preview shows the **Sign-up** screen even with free sign-up turned off, so you can check its look. On the **Login** screen, though, the **Create your account** link only appears with free sign-up on, just as students see it.
- **One color.** Buttons, links and background come from the same accent color. There is no separate color for text, link or button.
- **App install notice.** With the [App](https://help.cademi.cloud/en/configuracoes/aplicativo.md) configured, the login screen of the Classic model shows, on phones, the instruction to install it.

## Frequently asked questions

**My logo disappeared on the dark background. What do I do?** Upload a version of the logo that reads well on the model's background: light for Aurora and Stage, dark for Editorial. Or change the **Light or dark mode**. The image is a single one for all four models.

**I want the login screen in my color, but the student area in another.** Set the **Accent color** here. While it is filled in, the access screens do not follow the student area color.

**I picked a color and the preview did not change.** The preview uses the colors already saved. Click **Save now** and open the preview again.

**I changed the model and my custom code broke the screen.** Code written for the Classic model may depend on the old structure. Review the code in **Settings > Custom code** or go back to Classic.