Boa noite. Gostaria de alterar a cor das letras e dos botões de alguns campos na minha loja.
Gostaria de alterar os botões das redes sociais: facebook, twitter e Pinterest
Gostaria de alterar também a cor dos campos: Descrição, especificações e características.
Link da Loja: https://blazelongboards-manutencao.lojaintegrada.com.br/longboard-borboleta-
Para trocar os ícones das redes sociais, use este código JavaScript:
$(document).ready(function() {
$("#st-1 > div.st-btn.st-first > img").attr("src","ENDEREÇO_DA_IMAGEM");
$("#st-1 > div:nth-child(2) > img").attr("src","ENDEREÇO_DA_IMAGEM");
$("#st-1 > div.st-btn.st-last > img").attr("src","ENDEREÇO_DA_IMAGEM");
});
Para alterar as cores das abas do produto, use esse CSS:
/*Altera Botão ativo*/
.produto #descricao .tabs li.current {
background: black;
border-color: red;
color: red;
}
/*Altera Botões desativados*/
.produto #descricao .tabs li {
background: blue;
border: solid 1px green;
color: #fff;
}
Boa noite José . Viu os comandos para alterar as redes sociais não deu certo. Não sei se eu fiz da maneira correta.
Ah não, você precisa substituir o trecho “ENDEREÇO_DA_IMAGEM”. Por exemplo:
$(document).ready(function() {
$("#st-1 > div.st-btn.st-first > img").attr("src","https://www.facebook.com/images/fb_icon_325x325.png");
$("#st-1 > div:nth-child(2) > img").attr("src","https://help.twitter.com/content/dam/help-twitter/brand/logo.png");
$("#st-1 > div.st-btn.st-last > img").attr("src","https://imagens.canaltech.com.br/empresas/760.400.jpg");
});
Essas imagens que eu coloquei provavelmente não vão servir. Mas aproveita e acrescenta esse código CSS para tirar esse fundo cinza e a borda dos ícones sociais:
#st-1 .st-btn[data-network=facebook], #st-1 .st-btn[data-network=googleplus], #st-1 .st-btn[data-network=pinterest], #st-1 .st-btn[data-network=twitter] {
background: #fff !important;
border: solid 1px #fff;
}
Boa noite José. Eu fiz as alterações, porém não surtiu efeito. Acredito que eu possa estar esquecendo de algum detalhe. Eu fiz um upload das imagens para a plataforma. Copiei o caminho e adicionei ao comando HTML. Porem mesmo fazendo isso as imagens não aparecem.
O comando via CSS que você me passou quando eu aplico ele some com os ícones. Pode me ajudar.
Segue os prints.
Que estranho, copiei o código que você usou e deu certo no meu navegador:
Aí só acrescentei alguns códigos CSS para deixar os ícones como estão aparecendo na imagem:
/*Aumenta o tamanho dos ícones*/
#st-1 .st-btn > img {
height: auto !important;
width: auto !important;
top: 0 !important;
}
/*Retira o fundo escuro quando passa o mouse por cima dos ícones*/
#st-1 .st-btn[data-network=facebook]:hover, #st-1 .st-btn[data-network=googleplus]:hover, #st-1 .st-btn[data-network=pinterest]:hover, #st-1 .st-btn[data-network=twitter]:hover {
background: none !important;
}
Então José. Não entendo porque não está dando certo. Eu acrescentei os comandos que você me passou. Dá uma olhada como ficou.
O Codigo HTML está dessa forma:
(document).ready(function() {
("#st-1 > div.st-btn.st-first > img").attr(“src”,“https://cdn.awsli.com.br/1669/1669182/arquivos/iconfinder_Colored_Facebook3_svg_5365678.png”);
("#st-1 > div:nth-child(2) > img").attr("src","https://cdn.awsli.com.br/1669/1669182/arquivos/iconfinder_1_Twitter3_colored_svg_5296516.png");
("#st-1 > div.st-btn.st-last > img").attr(“src”,“https://cdn.awsli.com.br/1669/1669182/arquivos/iconfinder_icon-printerest_335921.png”);
});
Vamos fazer um teste. Acrescenta esse código no lugar do anterior:
$(document).ready(function() {
console.log("Trocando ícones das redes sociais!");
$("#st-1 > div.st-btn.st-first > img").attr("src","https://cdn.awsli.com.br/1669/1669182/arquivos/iconfinder_Colored_Facebook3_svg_5365678.png");
$("#st-1 > div:nth-child(2) > img").attr("src","https://cdn.awsli.com.br/1669/1669182/arquivos/iconfinder_1_Twitter3_colored_svg_5296516.png");
$("#st-1 > div.st-btn.st-last > img").attr("src","https://cdn.awsli.com.br/1669/1669182/arquivos/iconfinder_icon-printerest_335921.png");
});
setTimeout(
function() {
console.log("Trocando ícones das redes sociais!");
$("#st-1 > div.st-btn.st-first > img").attr("src","https://cdn.awsli.com.br/1669/1669182/arquivos/iconfinder_Colored_Facebook3_svg_5365678.png");
$("#st-1 > div:nth-child(2) > img").attr("src","https://cdn.awsli.com.br/1669/1669182/arquivos/iconfinder_1_Twitter3_colored_svg_5296516.png");
$("#st-1 > div.st-btn.st-last > img").attr("src","https://cdn.awsli.com.br/1669/1669182/arquivos/iconfinder_icon-printerest_335921.png");
}, 1000);
Acrescenta esse CSS para ver se melhora:
#st-1 .st-btn[data-network=facebook], #st-1 .st-btn[data-network=googleplus], #st-1 .st-btn[data-network=pinterest], #st-1 .st-btn[data-network=twitter] {
background: #fff !important;
border: none;
}
E no código JavaScript, retira a parte inicial e deixa só esse trecho:
setTimeout(
function() {
console.log("Trocando ícones das redes sociais!");
$("#st-1 > div.st-btn.st-first > img").attr("src","https://cdn.awsli.com.br/1669/1669182/arquivos/iconfinder_Colored_Facebook3_svg_5365678.png");
$("#st-1 > div:nth-child(2) > img").attr("src","https://cdn.awsli.com.br/1669/1669182/arquivos/iconfinder_1_Twitter3_colored_svg_5296516.png");
$("#st-1 > div.st-btn.st-last > img").attr("src","https://cdn.awsli.com.br/1669/1669182/arquivos/iconfinder_icon-printerest_335921.png");
}, 1000);
José pode me ajudar com mais um detalhe?
Dentro dessa mesma pagina eu gostaria de alterar o texo e cor de outros botões ( Calcule o Frete, CEP e Calcular).
Pode me ajudar?
Pode deixar. Vou dar uma olhada.
Boa tarde. Você sabe como alterar o botão de variação para uma imagem/logo no lugar da escrita?
Obrigado
