Fórum OpenCart Brasil

Por um e-commerce livre, confiável e profissional

Suporte para temas OpenCart v1.x.
Avatar do usuário
Por gnewton
Mensagens
#13625
Olá pessoal!

Andei procurando algo sobre aumentar o tamanho da logo aqui no fórum e só achei informações pro tema padrão do opencart.

Comprei um tema no theme forest, e estou tendo problemas em colocar um logo que fique num tamanho bom (como a logo aqui do fórum por exemplo) e sem que ele suma ou fique cortado no cabeçalho.

Segue a parte do header no stylesheet do meu tema:

#header {
width:100%;
min-width:988px;
padding-bottom: 14px;
position: relative;
z-index:20;
min-height:110px;
background:url(../image/backgrounds/pattern30.gif) top center repeat;
}
#header .inner {
position:relative;
background:url(../image/back_prod.png) top center no-repeat;
}
#content_holder .inner {
background:url(../image/back_prod.png) top center no-repeat;
padding:30px 0px;
}

#header #logo {
width:250px;
height:90px;
float:left;
margin:15px 0;
text-align:center;
overflow:hidden;
}
#logo a {
display:block;
width:250px;
height:150px;
text-align:center;

Agradeço a ajuda! Ficar sem logo não dá! xD
Editado pela última vez por gnewton em 27 Nov 2012, 13:29, em um total de 1 vez.
Avatar do usuário
Por Renato Frota
Mensagens
#13628
Olá, parceiro.

Você praticamente respondeu já. rsrs..

O segredo está nesse trecho aqui:
Código: Selecionar todos
#header #logo {
width:250px;
height:90px;
float:left;
margin:15px 0;
text-align:center;
overflow:hidden;
}
width é largura, height é altura (da imagem, em pixels), e margin é a distância que o div (e a logo) terá em relação à margem do item anterior ou do topo da página, se for o primeiro div com tamanho especificado aí no header.

o parâmetro margin pode receber de 1 a 4 valores, responsáveis pelas distâncias na parte superior, direita, inferior, esquerda (sentido do relógio, a começar da meia noite). uma posição que não tiver margem informada, recebe o valor da posição oposta. havendo apenas um valor, o mesmo valerá para as 4 margens:

margin:25px 50px 75px 100px;
margem superior será de 25px
margem direita será de 50px
margem inferior será de 75px
margem esquerda será de 100px

margin:25px 50px 75px;
margem superior será de 25px
margem direita será de 50px
margem inferior será de 75px
margem esquerda será de 50px (oculta no código, herdada da margem direita)

margin:25px 50px;
margem superior será de 25px
margem direita será de 50px
margem inferior será de 25px (oculta no código, herdada da margem superior)
margem esquerda será de 50px (oculta no código, herdada da margem direita)

margin:25px;
todas as margens serão de 25px

Sendo assim, no seu código, atualmente:

margin:15px 0;
margem superior é de 15px
margem direita é de 0px
margem inferior é de 15px (oculta no código, herdada da margem superior)
margem esquerda é de 0px (oculta no código, herdada da margem direita)
Avatar do usuário
Por gnewton
Mensagens
#13896
Olá Renato.

Além da parte onde você disse pra alterar o tamanho do logo e margin, não é necessário alterar nada em:

#logo a {
display:block;
width:250px;
height:150px;
text-align:center;

Outra coisa, é nesse mesmo header que eu posso "apagar" quais opções eu quero que apareça no topo, como "informações", "lista de desejo", "carrinho"...etc? É que estou querendo deixar apenas alguns links no topo e também movê-los para a direita.

Valeu Renato!
Avatar do usuário
Por Renato Frota
Mensagens
#13926
o CSS só "estiliza" o conteúdo.

para ele não aparecer, você deve remover no template

catalog/view/theme/-seu-tema-/template/header.tpl estão os itens do topo
Fazendo download ao clicar na logo

Alguém sabe me dizer pq qndo clico na logo […]

Olá pessoal! Sei q o OC tem como personali[…]

achei o arquivo php, dentro tem os dados do banco […]

Alterar o arquivo footer.twig

@veteranodf , fiz a burrice de instalar sem te[…]