Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Rafael souza

Personalização html e css

Por , em Desenvolvimento frontend

Recommended Posts

Rafael souza    0

Rafael souza
Postado

olá pessoal,

 

estou com pequeno grande problema, comecei uma loja virtual mas preciso dar um personalizada nela, uso a plataforma da dotstore(alguém conhece) tenho acesso total aos arquivos em html para download porem como sou leigo será que alguém que tenha paciencia pode me dar umas dicas.

 

por exemplo tenho este codigo que é do topo e gostaria de colocar uma imagem ou um degradê no fundo. alguem sabe como faz isso?

 

<script language="javascript" src="../../DotStore/Inc/SetaFuncLoja.js"></script>
<table width="100%" height="55" border="0" cellpadding="0" cellspacing="0" class="">
<tr>
<td width="15%" rowspan="2" style="padding-left:10px;"><a href="?Menu=PaginaInicial">##Logotipo##</a></td>
<td align="right"><table width="90" border="0" align="right" cellpadding="0" cellspacing="5">
<tr>
<td align="right">##Idiomas##</td>
</tr>
</table></td>
</tr>
<tr>
<td height="48" align="right" valign="top" style="color:#cc3333">
<script>
var VStr = "##ClienteNome##"
if(VStr != ""){document.write("Olá <B>"+VStr+"</B>, seja bem vindo.")};
</script> </td>
</tr>
</table>

Compartilhar este post

Link para o post
Compartilhar em outros sites

guilomaker    31

guilomaker
Postado

e só você adicionar isso ao seu arquivo EstiloLoja.css

 

div#DS_TopoGeral {
background: #333;
}
ai no background você pode colocar uma imagem ou o degradé que você quer. ai no exemplo esta com uma cor de background uma cor escura, se você colocar isso ai no seu css e salvar você vai ver.
você pode usar esse site pra criar um gradient

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael souza    0

Rafael souza
Postado

 

e só você adicionar isso ao seu arquivo EstiloLoja.css

 

div#DS_TopoGeral {
background: #333;
}
ai no background você pode colocar uma imagem ou o degradé que você quer. ai no exemplo esta com uma cor de background uma cor escura, se você colocar isso ai no seu css e salvar você vai ver.

 

muito obrigado vou tentar, aproveitando a oportunidade quanto ao menu que está alinhado ao topo pra mudar o alinhamento também é estiloloja.css?

Compartilhar este post

Link para o post
Compartilhar em outros sites

guilomaker    31

guilomaker
Postado

muito obrigado vou tentar, aproveitando a oportunidade quanto ao menu que está alinhado ao topo pra mudar o alinhamento também é estiloloja.css?

 

sim! e só procurar por #DSL_Menutopo no EstiloLoja.css , ele esta flotado em right, você pode colocar left, ou centro ai e com você.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael souza    0

Rafael souza
Postado

 

por nada! não esqueça de marcar o tópico como resolvido caso tenha resolvido seu problema.

eu achei o #DSL_menutopo mudei o posicionamento mas não consegui posiciona-lo na parte de baixo de onde ele está

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael souza    0

Rafael souza
Postado

coloque

margin-top: 104px;

 

no #DSL_menutopo

no link que passei da minha loja onde fica os produtos tu sabe me dizer como coloco uma borda ao redor do produto e da descricão dele?

Compartilhar este post

Link para o post
Compartilhar em outros sites

guilomaker    31

guilomaker
Postado

no link que passei da minha loja onde fica os produtos tu sabe me dizer como coloco uma borda ao redor do produto e da descricão dele?

 

pra colocar borda e só adicionar

 

border: 2px solid f2f2f2; ai você altera o tamanho da borda e a cor

 

a classe da imagem do produto é

 

DSL_FotoProduto

 

nome do produto

 

DSL_NomeProduto

 

sobre o produto

 

DSL_SubProduto

 

ai e só você adicionar o border na classe que você quiser.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael souza    0

Rafael souza
Postado

 

pra colocar borda e só adicionar

 

border: 2px solid f2f2f2; ai você altera o tamanho da borda e a cor

 

a classe da imagem do produto é

 

DSL_FotoProduto

 

nome do produto

 

DSL_NomeProduto

 

sobre o produto

 

DSL_SubProduto

 

ai e só você adicionar o border na classe que você quiser.

oi boa tarde, então tentei fazer como voce falou mas não consegui pra você entender como gostaria que ficasse neste link onde fica os produtos gostaria de colocar esta borda ao redor

http://www.astrodistribuidora.com/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael souza    0

Rafael souza
Postado

no sue não da pra fazer isso, pois a lista de produtos não tem um posicionamento correto. não tem a div bonitinha ao redor de todo produto a qual de pra colocar a borda.

hum, por isso que me cobraram cara pra fazer esta personalização, rsrsrsrsr.

 

pra fazer isso eu teria que mexer na estrutura todo do site?

Compartilhar este post

Link para o post
Compartilhar em outros sites

guilomaker    31

guilomaker
Postado

hum, por isso que me cobraram cara pra fazer esta personalização, rsrsrsrsr.

 

pra fazer isso eu teria que mexer na estrutura todo do site?

 

olha o máximo que da pra mim fazer pra você e esse

 

ANTES

whfhj9.png

 

 

DEPOIS

ej2bd.jpg

 

antes de qual quer coisa faça um backup do seus arquivos EstiloLoja.css e home.css

 

substitua um por um procure por eles dentro desses dois arquivos ai citado acima.

li.Dot_ListaProdutosLIClass {
  border: 2px solid #f3f3f3;
}
#DSL_ContainerProdutos ul li {
  float: left;
  width: 32%;
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid #e9e9e9;
  margin-left: 4px;
}
.DSL_BlocoProdutos {
  width: 100%;
  display: block;
  margin: auto;
  height: 240px;
  background: #ccc;
}

.DSL_FotoProduto {
  width: auto;
  border: 0px;
  height: auto;
  padding-top: 10px;
  overflow: hidden;
  background: #fff;
  text-align: center;
  position: relative;
}
.DSL_ValorDe {
  font-size: 12px;
  margin: 7px 0 0 0;
  color: #363636;
  text-decoration: line-through;
  text-align: center;
}
.DSL_ValorPor {
  font-size: 13px;
  font-weight: bold;
  display: block;
  color: #363636;
  text-align: center;
}
.DSL_Lancamento {
  text-align: center;
  margin-bottom: 5px;
  margin-top: 10px;
  height: 21px;
}
.DSL_NomeProduto {
  text-align: center;
}

depois salva e irá ficar igual na foto la em cima.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael souza    0

Rafael souza
Postado

 

olha o máximo que da pra mim fazer pra você e esse

 

ANTES

whfhj9.png

 

 

DEPOIS

ej2bd.jpg

 

antes de qual quer coisa faça um backup do seus arquivos EstiloLoja.css e home.css

 

substitua um por um procure por eles dentro desses dois arquivos ai citado acima.

li.Dot_ListaProdutosLIClass {
  border: 2px solid #f3f3f3;
}
#DSL_ContainerProdutos ul li {
  float: left;
  width: 32%;
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid #e9e9e9;
  margin-left: 4px;
}
.DSL_BlocoProdutos {
  width: 100%;
  display: block;
  margin: auto;
  height: 240px;
  background: #ccc;
}

.DSL_FotoProduto {
  width: auto;
  border: 0px;
  height: auto;
  padding-top: 10px;
  overflow: hidden;
  background: #fff;
  text-align: center;
  position: relative;
}
.DSL_ValorDe {
  font-size: 12px;
  margin: 7px 0 0 0;
  color: #363636;
  text-decoration: line-through;
  text-align: center;
}
.DSL_ValorPor {
  font-size: 13px;
  font-weight: bold;
  display: block;
  color: #363636;
  text-align: center;
}
.DSL_Lancamento {
  text-align: center;
  margin-bottom: 5px;
  margin-top: 10px;
  height: 21px;
}
.DSL_NomeProduto {
  text-align: center;
}

depois salva e irá ficar igual na foto la em cima.

era exatamente isso que eu queria fazer, acho que me expressei muito mal, rsrsrsrs

Compartilhar este post

Link para o post
Compartilhar em outros sites

guilomaker    31

guilomaker
Postado

era exatamente isso que eu queria fazer, acho que me expressei muito mal, rsrsrsrs

 

você se expressou certo! e que não e simples chegar a esse resultado da forma que estava seu site, mais em fim que bom que resolveu.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael souza    0

Rafael souza
Postado

 

você se expressou certo! e que não e simples chegar a esse resultado da forma que estava seu site, mais em fim que bom que resolveu.

cara valeu mesmo, não sei nem como te agradece.

 

você se expressou certo! e que não e simples chegar a esse resultado da forma que estava seu site, mais em fim que bom que resolveu.

cheguei no resultado bem parecido porem meus produtos não estão ao centro da borda, onde posso ter errado?

cara valeu mesmo, não sei nem como te agradece.

cheguei no resultado bem parecido porem meus produtos não estão ao centro da borda, onde posso ter errado?

olha como esta ficando

http://www.dotstore.com.br/84329_belacora/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael souza    0

Rafael souza
Postado

 

você se expressou certo! e que não e simples chegar a esse resultado da forma que estava seu site, mais em fim que bom que resolveu.

olá om dia, sei que já estou abusando da sua disponibilidade, mas olha só como esta ficando, fiz como você me passou o codigo mas algo deu errado as descrições não ficão centralizadas com o produto e a borda está bem fora.

 

se puderes dar uma analizada te agradeço.

 

01.jpg

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito