Alterar o leiaute do frontend da sua loja é algo fundamental para expressar a personalidade da sua loja, ter uma aparência mais profissional, e personalizar o ambiente conforme suas necessidades e regras de negócio.
Mas e o seu backend? Já imaginou como seria interessante poder personalizar também o ambiente de administração?
O Magento – ao menos até a versão 1.7.x CE – não possibilita essa modificação através do seu painel de administrador. Mas como desenvolvedor você pode customizar alguns códigos para obter resultados impressionantes.
Quem controla o leiaute do backend
O diretório de temas e templates do backend funciona exatamente da mesma forma que no frontend. Ele segue a mesma estrutura de diretórios e arquivos.
O documento que informa qual template e tema devem ser utilizados para renderizar as páginas da administração é o config.xml que fica em:
app > code > core > Mage > Adminhtml > etc > config.xml
Dentro deste arquivo você encontra as tags package e theme, indicando o nome dos diretórios que devem ser carregados para o leiaute.
default
default
Como esse arquivo faz parte de um módulo do core do sistema, não é recomendável fazer alterações neste arquivo. O aconselhável seria sobreescrever este arquivo em um diretório local, ou criar um módulo específico pra isso.
A estrutura de diretórios
Como dito anteriormente, a estrutura de diretórios para temas de backend segue a mesma arquitetura do frontend. Com a diferença da referência “frontend” para “adminhtml“.
Então para criar/alterar arquivos do template em backend você acessa:
app > design > adminhtml > default > default > layout app > design > adminhtml > default > default > locale app > design > adminhtml > default > default > template
Sendo que você vai alterar os diretórios default/default para o seu template/tema customizado. E você não precisa copiar todos os arquivos de um diretório para o outro, apenas aqueles que deseja efetuar alterações.
O diretório de imagens e estilos também segue a mesma estrutura:
skin > adminhtml > default > default
Lembrando que você não precisa alterar a estrutura de templates (xml e phtml) para customizar seu ambiente de administrador. Bastam algumas alterações de CSS para deixar seu Magento com cara de novo.
A transformação do login
Alguns anos atrás, um usuário do antigo fórum do MarioSAM me enviou essa customização da tela de login para o backend do Magento. Infelizmente eu não lembro o nome deste usuário para dar os créditos.
Mas ele transformou essa tela que todos nós conhecemos:
Nesta tela totalmente transformada:
E quer saber como ele fez isso? Com meia dúzia de linhas CSS e 3 (três) imagens simples.
Customizando sua tela de login
Agora vamos ver como fazer esta mágina da transformação. Primeiro faça uma cópia destes 3 (três) arquivos de imagem:
Coloque estes arquivos no diretório:
skin > adminhtml > default > default > images
Feito isso, abra o arquivo boxes.css que fica em:
skin > adminhtml > default > default > boxes.css
Procure pela linha de comentário:
/* LOGIN ******************************************************************************/
E substitua os estilos pelo código abaixo:
#page-login { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;background:url(images/bg.png) repeat-x; text-align:center; }
.login-container { width:406px; margin:160px auto; background:none; }
.login-form { padding:25px 58px 35px; background: url(images/bg-header.png) no-repeat; text-align:left; }
.login-form .input-left { float:right; }
.login-form .input-right { float:right; padding-top: 15px; }
.login-form .input-box input.input-text { width:270px;background:url(images/bg-input.png) repeat-x;border:none;padding:4px; }
.login-form h2 { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;margin:-3px -20px 32px;font-size:18px;text-transform:uppercase;color:#fff; font-weight:normal; }
.login-form label { color:#fff;font-weight:bold; }
.login-form .form-buttons { margin:25px 0 0 0; clear:both; text-align:right; }
.login-form .form-button { padding:5px 15px; }
.login-box .bottom { display:none; }
.login-container .legal { display:none; }
.login-form .validation-advice { margin:3px 0 0 0; }
.login-form .forgot-link { margin:0 17px 0 0; text-align:right; }
.login-form .form-button-adm { padding:5px 14px;background:#000;color:#fff;border:none; }
.login-form .form-buttons a { color:#fff;margin-left:10px; }
Assim que você salvar o arquivo e atualizar a página de login já deve ver as alterações de leiaute.
Simples assim! Qualquer dúvida use o fórum da Escola Magento.
Sucesso!