Fórum OpenCart Brasil

Enviado: **16 Jun 2012, 15:57**

Olá Galera,

estou com um cliente que vende suplementos e o site é:
http://musculoperfeito.com

Eu utilizei um tema comprado no themeforest que ficou muito próximo do que ele gostaria.
Tema Streak
Depois de fazer algumas alterações, afinal ninguém nunca esta satisfeito com o que tem, tive algumas idéias para complementar o tema, mas infelizmente não consegui executar todas ainda.

Adicionei um carrinho na parte lateral do tema, módulo que pode ser encontrado http://www.opencart.com/index.php?route ... order=DESC.

Modifiquei as partes dos menus e dos módulos que agora tem um "separador" e margens por demanda do cliente. (Ficou estranho, minha opinião).

Agora tenho idéias para fazer mudanças sutis e dar um boost no visual.

1° Eu gostaria de adicionar imagens depois do título de cada module, para iconizar cada um diferentemente.
Ex. Carrinho, adicionar um ícone de carrinho (uau que original), Minha conta, colocar um cadeado, os mais vendidos, colocar uma seta apontando pra cima, etc.
Coisas simples que podem deixar o visual mais autoexplicativo e convidativo.

2° Tem duas coisas de incomodando no menu do topo. Depois de colocar os "separadores" eu percebi que não ficou harmônico a divisão do espaço ocupado por cada categoria, logo sobrou espaço no final.
Outra coisa é que me incomodou o efeito de hover ser muito parecido com o tema em si. Eu tenho duas idéias diferentes para serem exploradas, e gostaria de uma ajuda para colocar em prática. Uma é tornar a cor do preenchimento de fundo do menu gradiente, assim fica uma "quebra" e adicionará um certo volume. Outra é colocar o hover de maneira permanente na categoria que estiver ativa.
Ex. se estiver navegando na pagina principal, ficar aceso o botão Principal, e assim por diante.

Eu disse duas, mas no final parecem que se casam as 3 idéias.

Alguém tem sugestões de como eu posso modificar isso?

Grato!

Enviado: **20 Jun 2012, 02:14**

Putz, ninguém se interessou?

Enviado: **20 Jun 2012, 09:50**

Sobre os ícones a melhor maneira é criar uma classe com a imagem de fundo q vc quer (tipo o ícone do carrinho), criar um div com o tamanho exato da imagem e adicionar no arquivo do template... Se for "iconizar" os títulos, não crie vários arquivos de image, faça isso com sprites via css. Procure um pouco sobre isso na net. Tem um site q resolve quase tudo relacionado a sprites: spriteme.org.

Não vejo problema com o espaçamento do menu, mas se quiser ajustar veja antes se o cliente não tem pretensão de colocar mais links. Para ajustá-lo é só aumentar o padding da classe dos itens. Use o Firebug ou o inspetor do Chrome para descobrir as classes e modificá-las.
Sobre o fundo, a maioria das pessoas iriam usar uma imagem, mas eu não aconselho. Use CSS3, pois é bem melhor e já funciona em todos os browsers atuais. Ficaria algo assim:

Código: Selecionar todos

background: -moz-linear-gradient(top, white 22%, lightGrey 60%, #A6A6A6 91%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(22%, white), color-stop(60%, lightGrey), color-stop(91%, #A6A6A6));
background: -webkit-linear-gradient(top, white 22%, lightGrey 60%, #A6A6A6 91%);
background: -o-linear-gradient(top, white 22%, lightGrey 60%, #A6A6A6 91%);
background: -ms-linear-gradient(top, white 22%, lightGrey 60%, #A6A6A6 91%);
background: linear-gradient(top, white 22%, lightGrey 60%, #A6A6A6 91%);

Claro q vc tem q customizar as cores. Não exclua nenhuma das linhas ou pode não funcionar em algum browser. Um pouco sobre gradiente via CSS: http://desenvolvimentoparaweb.com/css/g ... r-imagens/

Espero q ajude em algo

Enviado: **20 Jun 2012, 13:36**

Vou testar. Grato pelas sugestões!

Fórum OpenCart Brasil

Design, Imagens e Hover

Design, Imagens e Hover

Re: Design, Imagens e Hover

Re: Design, Imagens e Hover

Re: Design, Imagens e Hover