Fórum OpenCart Brasil

[slavezerorj]

Olá pessoALL!

estou fazendo um teste em uma instalação no servidor (pois sou iniciante) com o OpenCart e depois vou fazer no template do cliente. Comecei instalando o tema blackwhite. Modifiquei a logo colocando uma imagem maior e alterei o tamanho do header, mas minha dúvida é a seguinte:
Como faço para posicionar imagens no lado esquerdo superior do header? Nesta posição eu quero inserir as imagens do twitter e facebbok para aproveitar o espaço vazio.

na folha de estilos inseri o seguinte código abaixo mas não funcionou... o que está faltando ou errado?..rs
#redes-sociais {
position: absolute;
top: 15px;
left: 20px;
background: url(../image/twitter.gif) no-repeat;
color: #999;
}

desde já agradeço a quem puder ajudar. Tenham uma ótima semana!

[Manoel Vidal]

Olá,

- Tente:
float: left;
- Ao invés de:
position: absolute;
top: 15px;
left: 20px;
- Ou trabalhe com:
right: e bottom:

Espero ter ajudado

[slavezerorj]

Olá..esqueci do link que estou com a instalação em teste...rs.. http://www.estudioarrobanet.com/loja1

Olá,

- Tente:
float: left;
- Ao invés de:
position: absolute;
top: 15px;
left: 20px;
- Ou trabalhe com:
right: e bottom:

Espero ter ajudado

Obrigado Manoel, vou testar e posto o resultado.

[slavezerorj]

uma dúvida ...para inserir a imagem onde eu quero, basta inserir esse código na folha de estilos ou também tenho que inserir em outro lugar no template?

[Manoel Vidal]

Só na folha de estilos

uma dúvida ...para inserir a imagem onde eu quero, basta inserir esse código na folha de estilos ou também tenho que inserir em outro lugar no template?

[slavezerorj]

caramba...ainda não consegui..já tentei "trocentas" coisas e nada...rs

[slavezerorj]

Consegui posicionar a imagem em #header acrescentando o código:

background: url('../image/twitter.gif') no-repeat;
background-position: 20px 30px;

Obrigado Manoel Vidal, sua ajuda foi importante na minha pesquisa.

outra dúvida agora:
como coloco link neste imagem para que ao clicar abra a página de destino em outra janela?

um abraço!

[Manoel Vidal]

Acho que a melhor prática é você utilizar a tag <spam>.

- Exemplo do código em seu arquivo .tpl:

<a href="http://www.twitter.com/opencartbrasil" target="_blank" title="Siga-nos no Twitter"><spam class='twitter'></spam></a>

- No CSS:

.twitter {
background: url('../image/twitter.gif') no-repeat;
background-position: 20px 30px;
}

Espero ter ajudado

[slavezerorj]

Manoel Vidal,

muito obrigado por estas informações!

Só fiquei com dúvida sobre qual arqvivo .tpl devo editar. Ainda não conheço a opencart e, procurei por um arquivo que fosse o index, mas não achei.

um abraço

[Manoel Vidal]

OpenCart não utiliza .htm ou .html, utiliza .tpl que são arquivos de templates, mas são iguais html.

O arquivo que você deve editar é o header.tpl que está no diretório /catalog/view/theme/default/template/common/ a propósito nesta pasta estão os .tpl que estruturam basicamente o tema.

Espero ter ajudado