Como personalizar a página de login do Moodle (com SCSS)

A página de login é a primeira coisa que colaborador e aluno veem. Com o visual padrão, ela parece "mais um sistema". Com a sua marca, vira o portal de treinamento da empresa. A boa notícia: dá para fazer quase tudo pelas configurações do próprio Moodle, sem instalar tema nem mexer em arquivos.

Este guia usa o Boost, o tema padrão. Em temas de terceiros, os caminhos mudam, mas a lógica é a mesma.

1. Logo e favicon

Em Administração do site > Aparência > Logos:

• Logo: a versão completa, usada na página de login. Prefira PNG ou SVG com fundo transparente.
• Logo compacto: a versão pequena, usada no cabeçalho.
• Favicon: o ícone da aba do navegador.

2. Cor da marca e imagem de fundo

Em Administração do site > Aparência > Temas, abra as configurações do Boost:

• Cor da marca: vira a cor principal de botões e links, inclusive no login.
• Imagem de fundo da página de login: uma foto da empresa ou uma imagem com as cores da marca. Use pelo menos 1920 px de largura e arquivo leve.

3. Texto de instruções

O Moodle permite mostrar um texto na página de login, por exemplo "Use o mesmo e-mail e senha da rede da empresa" ou o contato do suporte. A opção de instruções fica nas configurações de autenticação (em Gerenciar autenticação; a partir do Moodle 5.2, as configurações de login foram reunidas em Configurações de login).

Para trocar palavras da própria tela, como o texto de um botão, use a personalização de idioma em Administração do site > Idioma > Personalização de idioma.

4. Ajustes finos com SCSS

Nas configurações avançadas do Boost há dois campos: SCSS bruto inicial, para variáveis, e SCSS bruto, para regras. Variáveis do Bootstrap mudam o site inteiro:

// SCSS bruto inicial
$primary: #0B6652;
$border-radius: .5rem;

A página de login tem o seletor próprio #page-login-index, que permite mexer só nela:

// SCSS bruto
#page-login-index {
  background-color: #0B3D33;
}

#page-login-index .login-container {
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

#page-login-index .login-container .btn-primary {
  background-color: #FF6A3D;
  border-color: #FF6A3D;
}

Depois de salvar, se a mudança não aparecer, limpe os caches em Administração do site > Desenvolvimento > Limpar todos os caches.

5. Login com a conta da empresa

Um login bonito com senha separada ainda gera chamados de "esqueci a senha". Com login único (Microsoft 365, Google ou Active Directory), aparece o botão para entrar com a conta da empresa, e a página de login vira só a porta de entrada.

Quando ir além das configurações

• Layout totalmente diferente: o formulário de login é um template do Moodle que pode ser sobrescrito em um tema filho. É o jeito seguro, que sobrevive às atualizações.
• Temas prontos: alguns temas trazem login personalizável por configurações. Confira a compatibilidade com a sua versão. Veja temas e personalização.
• Nunca edite arquivos do núcleo: a próxima atualização apaga a mudança.

Perguntas frequentes