Olá Pessoal, gostaria de ajuda para ajustar a barra superior, que mostro abaixo. Gostaria de colocar os dados de contato ao lado esquerdo e, no lado direito, os icones de redes sociais. Podem me ajudar?
Obrigada!
1 curtida
Olá!!
Acho que não compreendi direito, mas seria assim?
Caso for isso, você pode aplicar colando esses estilos no painel em “Visual > Editar CSS”:
.barra-inicial .canais-contato {
width: 100%;
}
.barra-inicial .canais-contato ul {
float: none;
}
.barra-inicial .canais-contato li:nth-child(2),
.barra-inicial .canais-contato li:nth-child(3) {
float: right;
}
Espero ter ajudado, até mais!!
3 curtidas
Ei Math, poxa, muito obrigada!!
Era quase isso, mas só de ter ajustado já te agradeço. O que pensei foi em colocar os icone do Instagram ao lado direito e os contatos do lado esquerdo, como nesta imagem:
Mas desde já te agradeço muito!!
Beijos!
1 curtida
Imagina!!
Eu posso te ajudar a deixar dessa maneira, só peço para você configurar o seu Instagram em “Visual > Redes Sociais”, para que possamos manipular o elemento.
Fico à disposição, até mais!!
1 curtida
Ei Math, boa noite!
Obrigada pela gentileza! Fiz o que você pediu, coloquei o Instagram da loja lá.
1 curtida
Boa noite!!
Imagina, disponha!! Primeiro, vamos remover os estilos que eu sugeri na primeira mensagem. Além desses, exclua esse estilo em específico, pelo que eu pude observar, ele está na linha 283 até à 285 no painel:
.lista-redes.span3.hidden-phone {
display: none;
}
Pronto, agora podemos adicionar os novos:
/* Opcional: Caso queira adicionar a borda como na imagem do exemplo */
.barra-inicial {
border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}
.barra-inicial .row-fluid {
display: flex;
align-items: center;
flex-direction: row-reverse;
height: 40px;
}
.barra-inicial .canais-contato ul {
float: left;
}
.barra-inicial .lista-redes ul {
float: right;
}
.barra-inicial .lista-redes li:last-child {
display: none;
}
/* Opcional: Para deixar o ícone arredondado */
.barra-inicial .lista-redes i {
border-radius: 100%;
}
Esse é o resultado final:
Esse é o nosso ícone padrão do Instagram, caso queira deixar sem cor, diminuir o tamanho ou fazer alguma outra alteração, sinta-se à vontade para comentar.
Espero ter ajudado, até mais.
1 curtida
Ei Marth, boa tarde!
Obrigada, fiz exatamente o que pediu e deu tudo certo! Pode me ajudar a trocar o icone para um preto? Outra coisa, já abusando da sua boa vontade, como removo os icones laranja e do Insta no rodapé? Eu estou abusando, eu sei.
E você pode me tirar uma dúvida sobre o Instagram? Não achei nenhum tópico falando sobre como colocar o feed na home da loja e fiquei com dúvidas se isso é possível ou não na loja integrada, se não for não vou ficar batendo cabeça…rsrs
Mais uma vez muito obrigada! Sou designer, se precisar de alguma ajuda…para q eu possa retribuir.
Beijos!
1 curtida
Boa tarde Christiana!!
Para alterar a cor do ícone do Instagram e dos futuros ícones que forem adicionados, podemos aplicar esse estilo dentro daquele anterior que deixava ele arredondado:
.barra-inicial .lista-redes i {
border-radius: 100%;
background: #000;
}
Que isso, imagina. Sinta-se à vontade para postar as dúvidas quantas vezes for necessário. Vamos ocultar esses ícones do rodapé, aliás, para não ficar a coluna vazia, acredito ser melhor ocultar a coluna:
#rodape .redes-sociais {
display: none;
}
Sobre o Feed do Instagram, há pouco tempo atrás, era possível adicionar facilmente, não só na Loja Integrada, mas em qualquer site, eu mesmo tinha criado um Script, fácil de ser colocado, que nem precisava de Token, mas recentemente eles mudaram as políticas. Agora precisa-se criar uma conta de desenvolvedor no Facebook, criar o aplicativo, vincular com o Instagram, gerar o Token (este que por sua vez, tem validade curta)… Estou tentando encontrar uma maneira, de encontrar/desenvolver uma solução fácil e gratuita que não demande esse trâmite todo para o lojista, que ele necessite apenas deixar o Instagram público. Assim que eu tiver uma atualização, posto naquele outro tópico que você tinha aberto.
Sobre a imagem da barra fixa, realmente está quebrando, devemos ajustar a altura do campo de busca e do botão ao passar o Mouse.
Visual > Editar CSS (Linha 166): Trocar height: 40px por height: 30px
Visual > Editar CSS (Linha 179): Trocar height: 48px por height: 28px
Fico à disposição, até mais!!
3 curtidas
Tudo super certo!! Muitíssimo obrigada, Math, pela disposição e pela paciência!!
Fico grata também, desde já, pelo tópico do Instagram.
Beijos!
2 curtidas
Olá Math, bom dia!
Cá estou aqui novamente pedindo ajuda em relação a barra topo novamente… gostaria de alinhar o quantidade do carrinho ao icone da sacola…me ajuda?
Beijos e obrigadíssima!
Bom dia Christiana!!
Parece que você já conseguiu, mas ao acessar sua loja, eu reparei que tem um código fora da Tag :
Fico à disposição, até mais.
Ei Math, boa noite!
Já consegui sim, obrigada! Maaaas, to apanhando para mudar o icone do Instagram de lugar no rodapé do mobile, está desconfigurado, e não estou conseguindo, pode me ajudar?
Muito obrigada!!
Boa noite, posso ajudar sim!!
Pode remover o estilo “position: absolute;” da linha 481, dentro do seletor: “#rodape .redes-sociais”.
Espero ter ajudado, até mais.
Muito obrigada!! De verdade!
Me ajuda a deixar como na foto abaixo, sei q é abuso mas…
1 curtida
Issoooooooo! Oh, Gloria!
2 curtidas
@math arrasou na ajuda 
2 curtidas
Eu que agradeço, pessoal!!
Segue o código:
@media (max-width: 767px) {
#rodape {
text-align: center;
}
#rodape .titulo {
max-width: 100px;
margin: 0 auto 10px;
text-transform: uppercase;
}
#rodape .redes-sociais {
width: auto;
}
.bandeiras-pagamento li {
float: none;
display: inline-block;
}
.selos li {
float: none;
}
}
Qualquer melhoria, é só comentar.
Espero ter ajudado, até mais!!
2 curtidas
Ei Math, mais uma vez muito obrigada! Me salvou MASTER.
Se não for encher o saco, já enchendo…peguei esse código para colocar a newsletter no mobile, mas não consigo ajudar o texto dentro da caixa.
O código:
O modelo:
E prometo não te perturbar mais!! Muito obrigada!! Beijo.
1 curtida
Imagina!!
Não precisa desse código JavaScript, você pode excluí-lo. Nós podemos utilizar apenas CSS:
@media (max-width: 767px) {
#barraNewsletter {
display: block !important;
}
#barraNewsletter .componente .texto-newsletter {
white-space: normal;
text-align: center;
}
}
Espero ter ajudado, até mais.
2 curtidas