Alterando o tema da administração

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.

<stores>
 <admin>
 <design>
 <package>
 <name>default</name>
 </package>
 <theme>
 <default>default</default>
 </theme>
 </design>
 </admin>
</stores>

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:

magento-alterando-tema-01

Nesta tela totalmente transformada:

magento-alterando-tema-06

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:

magento-alterando-tema-03

magento-alterando-tema-04

magento-alterando-tema-05

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.

Sucesso!

2017-01-24T20:24:08+00:00

RECEBA DICAS VALIOSAS NO SEU EMAIL

x