Página 1 de 1

Adicionar uma imagem no cabeçalho.

Enviado: 01 Mar 2012, 08:27
por kids
Bom dia !

Primeiramente gostaria de agradecer a todos pela grande contribuição que vcs prestam aqui no forum e faz com que caras leigos que nem eu consigam entender como funciona a programação.
Bom, estou com pequeno problema e não consigo resolver, alguém poderia me explicar como colocar uma pequena imagem de um numero de televendas no cabeçalho do site mais precisamente do lado do logo e abaixo da caixa de procura.
meu site é http://www.kidsprodutos.com.br/ocart

Muito obrigado

Ademilson

Re: Adicionar uma imagem no cabeçalho.

Enviado: 01 Mar 2012, 10:34
por Renato Frota
catalog/view/theme/-seu-tema-/template/stylesheet/stylesheet.css

antes de:
Código: Selecionar todos
#header .links {
adicione:
Código: Selecionar todos
#header .atendimento {
  position: absolute;
  top: 70px;
  right: 0px;
}
(ajuste o top/right do botão: aumente o top para descer o botão, aumente o right para movê-lo para a esquerda)


em catalog/view/theme/seu-tema/template/common/header.tpl

procure:
Código: Selecionar todos
<div class="links">
antes dele, inclua:
Código: Selecionar todos
<div class="atendimento">
.... seu codigo aqui ....
</div>
feito :mrgreen:

Re: Adicionar uma imagem no cabeçalho.

Enviado: 01 Mar 2012, 15:37
por kids
Muito Obrigado Renato !

Tu saberia me dizer o link que eu coloco ? Eu mando a imagem para o sever mas não seu o caminho para puxar ela poderia me ajudar ?

Obrigado mais uma vez

Ademilson

Re: Adicionar uma imagem no cabeçalho.

Enviado: 01 Mar 2012, 18:44
por Renato Frota
tente:
Código: Selecionar todos
<div class="atendimento">
    <img src="<?php echo DIR_TEMPLATE ."image/IMAGEMAQUI.jpg" ?>" />
</div>
e a imagem em catalog/view/theme/-seu-tema-/image/IMAGEMAQUI.jpg

Re: Adicionar uma imagem no cabeçalho.

Enviado: 01 Mar 2012, 23:14
por kids
Ola Renato desculpa mais uma vez te incomodar mas segui os passos todos e não consegui puxar a imagem, antes aparecia um texto no poto do caminho da imagem agora não aparece nada tentei varias formas como espaço letras maisculas e minusculas mas não consegui será que tu podia me dar mais esta força.

Obrigado

Re: Adicionar uma imagem no cabeçalho.

Enviado: 02 Mar 2012, 00:25
por Renato Frota
kids escreveu:Ola Renato desculpa mais uma vez te incomodar mas segui os passos todos e não consegui puxar a imagem, antes aparecia um texto no poto do caminho da imagem agora não aparece nada tentei varias formas como espaço letras maisculas e minusculas mas não consegui será que tu podia me dar mais esta força.

Obrigado
Me parece que você usou esse código:
Código: Selecionar todos
<div class="atendimento">
   <home3/kidsprod/public_html/ocart/catalog/view/theme/red15/image/televendas.jpg>
</div> 
que o próprio OpenCart converteu (pois você usou uma URI - que é o path interno do servidor):
*(URI é diferente de URL, que é o caminho "externo", http, ftp, etc, usado no navegador do usuário para acesar o conteúdo)*
Código: Selecionar todos
<div class="atendimento">
    <www.kidsprodutos.com.br/ocart/catalog/view/theme/red15/image/televendas.jpg>
</div> 
Ele não se parece muito com o que eu passei!!

Em primeiro lugar, você usou o endereço completo, desde o /home. Se a foto está no seu domínio, você deve usar o caminho relativo. Caminho relativo é o endereço da imagem em relação à sua index.php (ou em relação ao seu stylesheet.css, se for um parâmetro CSS, pois arquivos CSS e JS são renderizados no PC do usuário).

Como a "chamada" da imagem está num template, que vai ser incorporado à index.php e só depois "renderizado", a chamada ocorre no index.php então deve ser relativa à ele.

Em relação ao index.php, (que está em http://www.kidsprodutos.com.br/ocart/index.php) o que sobra no caminho da imagem? Vou estilizar:

www.kidsprodutos.com.br/ocart/catalog/view/theme/red15/image/televendas.jpg

ou seja, sobra catalog/view/theme/red15/image/televendas.jpg

Nesse caso, a chamada deve ser para esse endereço!

Como você pode, no futuro, querer mudar de tema e essa chamada pode ficar no header do template default (que é praticamente igual ao do tema red5), eu troquei o trecho "catalog/view/theme/red15", que é específico desse tema, pela constante DIR_TEMPLATE, que o OpenCart automaticamente troca pelo caminho "/home/seudiretorio/site_ou_public_html/catalog/view/theme/" certinho.

Ainda esqueci ali em cima de incluir o nome da pasta do tema em uso, que é obtido com $this->config->get('config_template')

O caminho completo fica então:
Código: Selecionar todos
<div class="atendimento">
    <img src="<?php echo DIR_TEMPLATE . $this->config->get('config_template') . "image/IMAGEMAQUI.jpg" ?>" />
</div>
no seu caso, em particular:
Código: Selecionar todos
<div class="atendimento">
    <img src="<?php echo DIR_TEMPLATE . $this->config->get('config_template') . "image/televendas.jpg" ?>" />
</div>
Como você criou uma imagem levemente maior que o espaço em branco no header, sugiro você definir no CSS que ele fique por baixo de qualquer outro conteúdo do header, usando o parâmetro "z-index" negativo, por exemplo:
Código: Selecionar todos
#header .atendimento {
  position: absolute;
  top: 70px;
  right: 0px;
  z-index:-10px;
} 

Re: Adicionar uma imagem no cabeçalho.

Enviado: 02 Mar 2012, 09:14
por kids
Muito Obrigado Renato pela grande ajuda, e mais uma vez peço desculpa por te incomodar tanto kkkkk, sou meio leigo no assunto mas com a ajuda de vcs aqui no forum tudo é possível a gente fazer, vcs estão de parabéns muito legal este forum.

Grande braço

Ademilson

Re: Adicionar uma imagem no cabeçalho.

Enviado: 12 Mar 2012, 18:13
por nando82brasp
Por favor preciso de ajudam no seguinte tópico pois não entendi o que foi abordado aqui. grato,


https://forum.opencartbrasil.com.br/ ... 572#p17572

Re: Adicionar uma imagem no cabeçalho.

Enviado: 24 Jan 2014, 07:45
por daniloavenoso
shalonadonaiimports escreveu:Boa noite galera. Segui todo o tutorial descrito acima e consegui colocar as imagens no cabeçalho. AGORA eu gostaria de saber como colocar uma legenda .nestas imagens. Exemplo: Tenho a imagem do carrinho
Imagem
Gostaria de que quando o cliente posicionar o mouse em cima da figura abrisse uma caixa de mensagem com os dizeres ** TATATA TA AQUI SERÁ EDITAVÉL**
Imagem
As imagens já foram adicionadas e configuradas no header.tpl e no stylesheet.css
Se alquem puder me ajudar http://www.importecerto.com.br/
Algo parecido com o que tem na minha loja?

Dá uma olhada: www.cromusmotoparts.com.br