Boa tarde. O icone do facebook da minha loja sumiu. Eu tinha configurado porem nao sei o que houve, mais ele sumiu.
Link: https://blazelongboards-manutencao.lojaintegrada.com.br/
Para mim está aparecendo. Às vezes o servidor onde o ícone está hospedado ficou fora do ar.
Uma possível forma de evitar esse tipo de problema é trocar a URL da imagem ou substituir por um ícone mesmo.
1 curtida
Realmente voltou a imagem José. Voce Sabe me dizer como eu faço para substituir essa imagem por um icone. Gostaria de evitar esse tipo de problema futuro.
Por padrão o seu tema já usa ícones, mas nós substituímos eles com um código JavaScript.
Se você quiser ativar eles, é só apagar o código que desativa os ícones padrões da sua loja e depois alteramos o CSS para deixar eles assim:
2 curtidas
Esse é um deles. Tem esse aqui também:
<!-- Alterar Icones do insta e Face -->
$(document).ready(function() {
//Trocando Ícone do Facebook
$('#rodape > div.institucional.fundo-secundario > div > div > div > div > div.span3 > div > div.lista-redes > ul > li.visible-phone').removeClass("visible-phone");
$('#rodape > div.institucional.fundo-secundario > div > div > div > div > div.span3 > div > div.lista-redes > ul').append(`
<li>
<a href="https://facebook.com/blazelongboards" target="_blank"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" width="30px" /></a>
</li>
`);
$('#cabecalho > div.conteiner > div.menu.superior > div > ul > ul.actions > li > div:nth-child(2) > ul > div.redes-sociais.borda-principal > div.lista-redes > ul > li.visible-phone').removeClass("visible-phone");
$('#cabecalho > div.conteiner > div.menu.superior > div > ul > ul.actions > li > div:nth-child(2) > ul > div.redes-sociais.borda-principal > div.lista-redes > ul').append(`
<li>
<a href="https://facebook.com/blazelongboards" target="_blank"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" width="30px" /></a>
</li>
`);
//Trocando Ícone do Instagram
$('#rodape > div.institucional.fundo-secundario > div > div > div > div > div.span3 > div > div.lista-redes > ul > li').hide();
$('#rodape > div.institucional.fundo-secundario > div > div > div > div > div.span3 > div > div.lista-redes > ul').append(`
<li>
<a href="https://instagram.com/blazelongboards" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png" width="30px" /></a>
</li>
`);
$('#cabecalho > div.conteiner > div.menu.superior > div > ul > ul.actions > li > div:nth-child(2) > ul > div.redes-sociais.borda-principal > div > ul > li').hide();
$('#cabecalho > div.conteiner > div.menu.superior > div > ul > ul.actions > li > div:nth-child(2) > ul > div.redes-sociais.borda-principal > div > ul').append(`
<li>
<a href="https://instagram.com/blazelongboards" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png" width="30px" /></a>
</li>
`);
$('#rodape > div.institucional.fundo-secundario > div > div > div > div > div.span3 > div > div.lista-redes > ul > li:nth-child(5)').css('display', 'inline-block');
//Nova linha de código para o menu superior
$('#cabecalho > div.conteiner > div.menu.superior > div > ul > ul.actions > li > div:nth-child(2) > ul > div.redes-sociais.borda-principal > div.lista-redes > ul > li:nth-child(5)').css('display', 'inline-block');
});
2 curtidas
Pronto José exclui os dois comandos que faziam alteração nos ícones do facebook e Instagram.
1 curtida
Legal, então acrescenta esse código CSS para ver se melhora o visual dos ícones:
/*Altera ícone do Facebook*/
.lista-redes .icon-facebook {
background-color: #3a589b !important;
}
/*Altera ícone do Twitter*/
.lista-redes .icon-twitter {
background-color: #598dca !important;
}
/*Altera ícone do YouTube*/
.lista-redes .icon-youtube {
background-color: #cf3427 !important;
}
/*Altera ícone Instagram*/
.lista-redes .icon-instagram {
background: #f09433 !important;
background: -moz-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
}
/*Altera arredondamento dos ícones sociais*/
#cabecalho .support .support-items .redes-sociais i,
.lista-redes i {
border-radius: 5px;
}
/*Altera tamanho dos ícones sociais*/
.lista-redes > ul > li > a > i:before {
font-size: 20px;
}
3 curtidas
Ficou show José. Muito obrigado.
2 curtidas
José. A localização do Instagram da minha loja mudou de local. Agora ele está na parte de baixo. Tinha um campo para captura de e-mails onde o Instagram está localizado e agora. Mais pode me ajudar. Eu abri um chamado. Consegue me ajudar?
Eu acho que pode ser algum erro no CSS ou em algum JavaScript que inserimos na sua loja.
O seu CSS está com alguns erros.
Mas não acho que seja isso que causou esse bug, porque o Instagram está correto na página do produto
2 curtidas
Eu vi que você passou as linhas que estão com erro no código. Estou corrigindo José.
Obrigado. Depois vou testar e te aviso se deu certo.
Entendi. Mas o estranho é que o seu Instagram já está separado do rodapé nas páginas do produto.
Eu não sei te dizer o que aconteceu para só na Home ele estar sendo deslocado para o rodapé. Talvez seja algum script que está com problema ou é alguma opção de exibição que você alterou no painel administrativo ou algum bug do seu tema.
2 curtidas
Tem razão José. Só na tela principal ele está sendo deslocado para baixo.
Nas outras ele está normal.
Adiciona esse código no seu CSS:
.lista-redes .icon-pinterest,
.lista-redes .icon-pinterest:hover {
background-color: #cb2027 !important;
}
2 curtidas
Ficou perfeito José. Mais uma vez Obrigado.
1 curtida
José tenho uma missão complicada agora. Não sei se é possível, mas não custa tentar,
No menu principal do meu tema tem um campo (Trocas e devoluções). Mas na parte de baixo eu também tenho o mesmo campo de troca e devoluções. Eu quero alterar esse campo do menu de trocas e devoluções do cabeçalho para por exemplo: (Duvidas). Para quando a pessoa clicar ela será direcionada para uma página extra que eu vou criar que será de explicações. No nosso tema tem como a pessoa conseguir um cupom de desconto. No botão (Ganhe um Cupom). Mas não está muito intuitivo, pois ela tem que dar um copiar e colar no momento da compra. Nessa nova página eu iria colocar essas informações. Ou se tiver uma ideia melhor José e puder me ajudar.
Na verdade eu fiz algo parecido na minha loja para levar o visitante para o nosso blog no Wordpress. Veja se você consegue entender esse código JavaScript:
$(document).ready(function() {
var link = $('#cabecalho > div.conteiner > div.menu.superior > div > ul > li.trocas > a')
link.text("Dúvidas").attr("href", "LINK_DA_PAGINA")
});
3 curtidas
Show José. ficou muito bom. Muito obrigado.
1 curtida