Autor: Guia do Host

Em um mercado de hospedagem competitivo, cada ponto de contato com o cliente é uma oportunidade para reforçar sua marca. A página de login do cPanel é frequentemente negligenciada, mas é justamente aí que seus clientes têm uma de suas primeiras experiências com seus serviços. Uma página de login personalizada não apenas transmite profissionalismo, mas também cria uma experiência coesa que fortalece a identidade da sua marca e aumenta a confiança do usuário.

A personalização vai além de simplesmente adicionar um logo; envolve a criação de uma experiência visual completa que diferencia seus serviços dos concorrentes. Este guia completo abordará desde as modificações básicas até técnicas avançadas de personalização, permitindo que você transforme completamente a interface de login do cPanel, WHM e Webmail para refletir a identidade única da sua empresa.

Preparação e Pré-requisitos

Antes de iniciar o processo de personalização, é importante entender o que será necessário:

• Acesso adequado: Você precisará de acesso root ou de reseller ao WHM (WebHost Manager).
• Conhecimentos técnicos básicos: Familiaridade com HTML, CSS e possivelmente algum conhecimento de linha de comando será útil.
• Assets de marca preparados: Tenha seu logo, paleta de cores e quaisquer outras imagens que deseja usar já formatados e prontos.
• Versão adequada do cPanel & WHM: Idealmente a versão 11.50 ou superior.

É importante notar que não é possível modificar páginas de login para contas individuais do cPanel, e resellers não podem criar suas próprias páginas de login personalizadas – essas customizações são aplicadas em todo o servidor.

Métodos de Personalização

1. Personalização Básica da Marca no WHM

Para modificações rápidas e simples, você pode usar o recurso de Personalização integrado do WHM:

1. Faça login no WHM e navegue até “cPanel > Customization”.
2. Insira o nome da sua empresa, que aparecerá no canto superior esquerdo da barra de navegação do cPanel.
3. Faça upload do logo da sua empresa – o tamanho recomendado é aproximadamente 250px de largura por 50px de altura para se adequar ao layout.
4. Defina um favicon para aparecer nas abas do navegador.
5. Configure links para suas páginas de ajuda e documentação, que aparecerão por padrão no rodapé das páginas do cPanel.

Esta abordagem é a mais simples e não requer conhecimentos técnicos avançados, sendo ideal para personalizações rápidas de marca.

2. Criação de um Tema de Login Personalizado (Avançado)

Para controle total sobre a aparência da página de login, criar um tema personalizado é a abordagem mais eficaz. Siga este fluxo de trabalho recomendado:

Passo 1: Clonar o Tema de Login Existente

• Navegue até o Gerenciador de Temas do WHM (WHM >> Home >> Themes >> Theme Manager).
• Clique em “Manage Themes” em “Login”.
• Clique em “Clone” ao lado do tema que deseja duplicar.
• Digite um nome para o tema duplicado e clique em “Submit”.

O WHM salvará seu novo tema no diretório /usr/local/cpanel/base/unprotected/nomedoseutema/, onde “nomedoseutema” representa o nome que você inseriu.

Passo 2: Personalizar Logos e Imagens

Substitua as imagens do subcabeçalho no diretório /usr/local/cpanel/base/unprotected/nomedoseutema/images/. Estas imagens aparecem no topo das páginas de login para cPanel, WHM e Webmail.

A tabela abaixo mostra as imagens principais do tema de login padrão que você pode personalizar:

Localização da Imagem	Descrição	Dimensões (Altura x Largura)
images/cpanel-logo.svg	Subcabeçalho do cPanel	50 × 233
images/whm-logo_white.svg	Subcabeçalho do WHM para fundos escuros	55 × 208
images/webmail-logo.svg	Subcabeçalho do Webmail	50 × 306
images/whm.svg	Subcabeçalho do WHM para fundos claros	55 × 208

Além dos logos principais, você pode personalizar ícones adicionais:

Localização da Imagem	Descrição	Dimensões
images/icon-username.svg	Ícone do campo de usuário	20 × 20
images/icon-password.svg	Ícone do campo de senha	20 × 20
images/notice-success.svg	Ícone para login bem-sucedido	28 × 28
images/notice-error.svg	Ícone para erros	28 × 28

Nota importante: Mantenha as mesmas dimensões das imagens padrão para garantir o preenchimento adequado dentro dos contêineres de login. Se preferir usar imagens PNG em vez de SVG, será necessário modificar os templates do tema de login.

Passo 3: Modificar os Templates de Página de Login

Os templates controlam a aparência de cada página de login. Os temas de login incluem templates para as páginas de login principais, páginas de erro e templates para o recurso de Redefinição de Senha.

Aqui estão os templates principais que você pode personalizar:

• login.tmpl: Controla a aparência da primeira página de login.
• resetpass.tmpl: Controla a aparência da página de redefinição de senha.
• access_denied.tmpl: Aparece quando um usuário tenta fazer login com nome de usuário ou senha inválidos.
• error502.tmpl, error503.tmpl: Templates para erros específicos do servidor.
• fourohfour.tmpl: Para erros HTTP 404 (página não encontrada).

Usuários avançados podem modificar os arquivos main.tmpl e resetpass.tmpl para alterar como o sistema processa a entrada do usuário.

Passo 4: Personalizar o CSS para Ajustes de Estilo

Para alterações de cores, fontes e layout, edite os arquivos CSS do seu tema:

• Atualize os arquivos style_v2.css e style_v2_optimized.css com quaisquer alterações CSS desejadas.
• Use o inspetor do navegador (F12) para identificar os seletores CSS corretos para os elementos que deseja estilizar.

Passo 5: Ativar o Novo Tema de Login

• Selecione o novo tema de login no menu “Tema de login padrão” na interface de Tweak Settings do WHM (WHM >> Home >> Server Configuration >> Tweak Settings).

Solução Alternativa: Formulário de Login Personalizado com PHP

Se você prefere uma solução externa, pode criar seu próprio formulário de login personalizado usando PHP. Esta abordagem permite integrar completamente o login do cPanel/Webmail ao design do seu site:

<!-- Formulário HTML personalizado -->
<form action="login.php" method="post">
    <input name="User" type="text" placeholder="Usuário ou E-mail" required />
    <input name="Pass" type="password" placeholder="Sua Senha" required />
    <input name="port" type="radio" value="2083"><strong>cPanel</strong>
    <input name="port" type="radio" value="2096"><strong>Webmail</strong>
    <input type="submit" value="Login" />
</form>

<?php
// Arquivo login.php - processador do formulário
$domain = "seudominio.com"; // seu domínio ou IP
if(!$_POST['login']) { exit; }
$user = $_POST['User'];
$pass = $_POST['Pass'];
$port = $_POST['port'];
$port == "2083" || $port == "2096" ? $pre = "https://" : $pre = "http://";
?>
<body onLoad="setTimeout('document.forms[0].submit();',10)">
<form action="<?php echo "".$pre."".$domain.":".$port."/login/"; ?>" method="post">
    <input type="hidden" name="user" value="<?php echo $user; ?>">
    <input type="hidden" name="pass" value="<?php echo $pass; ?>">
</form>
</body>

Esta abordagem constrói uma string de URL e passa as credenciais necessárias que são usadas pelo cPanel para completar o processo de login nos bastidores.

Melhores Práticas e Considerações Importantes

• Mantenha a funcionalidade: Ao personalizar, certifique-se de não comprometer a usabilidade ou segurança do processo de login.
• Teste extensivamente: Sempre teste seu tema personalizado em diferentes navegadores e dispositivos.
• Backup dos arquivos originais: Mantenha cópias dos arquivos originais antes de fazer modificações.
• Documente suas alterações: Isso facilitará futuras atualizações e solução de problemas.
• Considere a experiência do usuário: Suas personalizações devem melhorar, e não dificultar, a experiência de login do usuário.

Conclusão

A personalização da página de login do cPanel é uma poderosa ferramenta de branding que pode diferenciar seus serviços no competitivo mercado de hospedagem. Desde simples substituições de logo até a criação de temas completamente personalizados, as opções disponíveis permitem que você crie uma experiência de login coesa e profissional que reforça sua identidade de marca.

Seguindo o guia passo a passo apresentado, você pode transformar a interface genérica do cPanel em uma extensão natural da sua marca, proporcionando aos seus clientes uma experiência consistente e profissional desde o primeiro momento em que fazem login em seus serviços.

Lembre-se que o cPanel & WHM está em constante evolução, portanto, é recomendável verificar as atualizações de versão que podem afetar seus temas personalizados.