Como manipular o visual pelo css no Magento 1.9

magento-manipular-visual-css-01

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.

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.

Trabalhe com o Firefox / firebugfirebug 

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.

magento-manipular-visual-css-03

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

magento-manipular-visual-css-04

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.

magento-manipular-visual-css-05

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

magento-manipular-visual-css-06

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

magento-manipular-visual-css-07

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.

magento-manipular-visual-css-08

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.

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

RECEBA DICAS VALIOSAS NO SEU EMAIL

x