Até agora você viu como instalar o Magento 1.9 em sua máquina e preparar o terreno para criar um tema personalizado com base no novo tema responsivo que vem com a instalação do Magento. Se ainda não viu dê uma lida antes de prosseguir para não ficar perdido.

Quer criar temas para Magento?

Neste artigo comento um pouco das folhas de estilo css do Magento, o jeito mais fácil de trabalhar usado por profissionais do mundo inteiro, mas antes vale a pena lembrar que a ordem que apresento estes artigos pode não ser a forma mais prática para se trabalhar no dia a dia. Eu, por exemplo, primeiro faço todo o planejamento, desenho o layout e só depois começo a aplicação. Ainda na aplicação faço o esqueleto do tema com css estritamente estrutural, vou para os arquivos de layout, crio os templates PHTML necessários e só então trabalho no visual, além do fato que não criei um novo layout para esta sequência de artigos. Para fins didáticos esperimente as dicas destes tutoriais e depois com mais conhecimento possa trabalhar de forma mais produtiva.

Sequência dos artigos

Trabalhe com o Firefox / firebugfirebug logo

Provavelmente você já trabalha com esta ferramenta para debugar seus projetos ou usa um similar no Chrome ou Explorer, claro que é preciso testar em vários navegadores, mas o Firefox com o plugin firebug é onde a maior parte do trabalho se desenvolve. Se não tem uma ferramenta similar instale o Firefox e vá em complementos para instalar o plugin do firebug.

Primeira alteração

Como o nome do tema sugere quero que a loja tenha bastante vermelho, mas o tema padrão responsivo é mais azul, então minha prioridade é descobrir onde está este código dos detalhes azuis.

No Firefox eu ativo o firebug com F12, clico no botão inspetor e clico em um elemento que quero inspecionar botao-inspecionar , na tela do firebug a esquerda ele relaciona todas as regras vinculadas ao elemento selecionado e rapidamente o elemento da cor (#3399CC) agora eu abro o arquivo styles.css (que já copiei para dentro do meu tema no artigo anterior) em um editor de texto, eu uso o notepad++, mas você pode usar o de sua preferência.

Inspecionando elemento no firebug

Para mudar todas as cores vou mandar localizar e substituir esta cor #3399CC pelo meu vermelho #EE3300

Trocando a cor no firegug do magento 1.9

Salve o arquivo e vejamos como ficou a página e pronto agora todos os elementos que eram azuis agora são vermelhos.

Mais uma alteração: menu vermelho

O Menu tá meio apagado, coloque o fundo vermelho com fonte branca.

Do mesmo jeito vou usar o botão de inspecionar e selecionar o menu, mas eu pego um elemento que não é o principal, então na tela do código do Firefox eu seleciono o nó <div id=”header-nav” class=”skip-content”> que envolve todo o menu.

selecionei o skip-content

A regra que vou trabalhar é a #header-nav que fica na linha 34034, mas antes de alterar o arquivo eu vou testar diretamente no Firefox através do firebug, basta clicar na regra e incluir novos atributos correndo os elementos com a tecla Tab do teclado então vamos lá

Retiro o elemento border-bottom e coloco o background-color: #EE3300;

Agora ficou com fundo vermelho, então mudo a cor do link

Novamente com o inspetor seleciono o link do menu, encontro a regra .nav-primary a, mas não posso simplesmente alterá-la porque vai alterar todos os links do menu e eu não quero isso, então crio uma nova regra .nav-primary > li > a abaixo da regra do style.css que fia na linha 3422 e fica assim:

.nav-primary > li > a {
 color: #FFFFFF;
 }

Quando o mouse fica sobre o link ele fica vermelho parecendo que sumiu, para evitar isto inclua esta regra:

.nav-primary > li:hover > a {
 color: #FFDDDD !important;
 }

Veja o resultado

resultado da alteração do menu no Magento 1.9

Altere o tamanho da tela

Muito importante quando trabalhar com temas responsivos é avaliar como ela se comporta em diferentes tamanhos de tela, em nosso local de trabalho podemos verificar isso mudando a largura da janela do Firefox. Existem vários sistemas que disponibilizam inúmeros tamanhos padrão, mas não considero muito úteis porque a variação de tamanho de tela de desktops, notebooks, tablets e smartfones é enorme. Então o ideal é redimensionar a largura da janela e achar o ponto de quebra do layout e fazer as alterações necessárias para corrigi-lo.

Por exemplo, quando altero a largura da página ele refaz o cabeçalho e some todos os itens vermelhos que eu coloquei

em tamanho menor o site some com minhas personalizações

Isso tira o padrão e faz parecer que é outro site, usando o Firefox/firebug altere a regra a.skip-link para esta:

a.skip-link {
 background-color: #EE3300;
 color: #FFFFFF;
 text-decoration: none;
 }

Agora tenho o menu vermelho novamente.

agora na visão pequena o menú é vermelho

Use esta técnica para todo tipo de elemento, vou ficando por aqui, faça mais testes usando o firebug e salvando em seu arquivo style.css. Para alterações mais complicadas ou caso surjam novas dúvidas comente aqui e no futuro eu criarei novos artigos.

Gostou deste artigo? Então compartilhe nas redes sociais, aproveita e curte minha fanpage onde posto novidades e outras coisas mais.

Um abraço.