Preciso alterar as cores e fazer ajustes no meu tema na versão mobile. Preciso diminuir o tamanho da fonte do texto dentro do campo buscar.
Preciso também alterar o cabeçalho para preto.
E acertar o campo todos os departamentos. Está desconfigurado.
Esse vai precisar de alguns códigos mais chatinhos:
/*Os códigos a seguir são exclusivos para dispositivos com menos de 767px de largura (Tablets e celulares)*/
@media (max-width: 767px) {
/*Altera a cor de fundo do menu do mobile*/
a.atalho-menu.visible-phone.icon-th.botao.principal {
background: CÓDIGO_DA_COR !important;
}
/*Alterar a cor dos retângulos do menu mobile*/
.span8.busca-mobile a.atalho-menu svg g rect {
fill: CÓDIGO_DA_COR;
}
/*Diminui o tamanho do ícone da lupa*/
.icon-search:before {
font-size: 15px;
}
/*Diminui o espaçamento e o tamanho da fonte do campo de busca*/
#auto-complete::-webkit-input-placeholder { /* WebKit browsers */
padding-left: 5px;
font-size: 12px;
}
#auto-complete:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
padding-left: 5px;
font-size: 12px;
}
#auto-complete::-moz-placeholder { /* Mozilla Firefox 19+ */
padding-left: 5px;
font-size: 12px;
}
#auto-complete:-ms-input-placeholder { /* Internet Explorer 10+ */
padding-left: 5px;
font-size: 12px;
}
/*Alterando a cor do cabeçalho*/
.atalhos-mobile.visible-phone.fundo-secundario.borda-principal {
background: #000;
}
}
O ideal é deixar esses códigos exclusivos para o mobile sempre nas linhas finais para não dar conflito com outros códigos.
Quanto aos textos, o que você está querendo alterar?
1 curtida
Esses campos aparecem quando eu clico no botão de departamentos.
Dentro daquele código anterior, acrescenta essas linhas:
/*Os códigos a seguir são exclusivos para dispositivos com menos de 767px de largura (Tablets e celulares)*/
@media (max-width: 767px) {
/*Códigos Anteriores*/
/*...*/
/*Altera a cor do botão "Meus Pedidos"*/
#cabecalho>div.conteiner>div>div.conteudo-topo>div.inferior.row-fluid>div.span8.busca- mobile>div.menu.superior.menu-active>div>ul>ul>li:nth-child(2)>a {
background: COR_DO_FUNDO_DO_BOTÃO;
color: COR_DA_LETRA;
}
/*Altera a cor do cabeçalho do mobile*/
.conteudo-topo .menu.superior ul.action-links {
background: COR_DO_FUNDO;
}
/*Altera cor do texto "Todos os departamentos"*/
.menu.superior .nivel-um>li>a>.titulo {
color: CÓDIGO_DA_COR;
}
/*Altera a cor do ícone ao lado do texto "Todos os depatamentos"*/
.menu.superior li.all-categories.com-filho .titulo svg path {
fill: CÓDIGO_DA_COR;
}
/*Cor do ícone de caminhão*/
form.form-rastreio svg.icon path {
fill: CÓDIGO_DA_COR;
}
/*Cor do texto "Rastrear"*/
#cabecalho>div.conteiner>div>div.conteudo-topo>div.inferior.row-fluid>div.span8.busca-mobile>div.menu.superior.menu-active>div>ul>form>span {
color: CÓDIGO_DA_COR;
}
}
1 curtida
Ele está fazendo a alteração na minha versão Desktop.
Que esquisito. Era para a mudança acontecer apenas no mobile.
Mas para alterar a cor no mobile, tenta acrescentar o !important ao final do código:
/*Altera cor do texto "Todos os departamentos"*/
.menu.superior .nivel-um>li>a>.titulo {
color: #f7f300 !important;
}
@Jose_Claudio_Alvarez sabe como faço para mostrar 2 produtos porlinha na versão mobile?
Mantendo o carrosel para o lado.
Nativamente a Loja Integrada Mostra um produto por linha.
Ah não. Você precisa tirar esse “;” antes do “important!”. Se não ele invalida o comando.
1 curtida
O seu site é o www.homegifts.com.br?
Vou ver se é possível fazer isso com um CSS.
Isso.
Show, tem pressa não. 
1 curtida
Perfeito. Ficou show José.
1 curtida
Parece que tem um espaço em branco no código.
Neste trecho: .busca- mobile.
Tenta eliminar ele para ver se resolve.
2 curtidas
Era exatamente isso José. Muito Obrigado.
1 curtida
José poderia dar uma olhada em outro chamado que eu abri por gentileza.
Os campos estão desconfigurados.
Esse eu estou vendo no seu outro tópico, mas está difícil.
O seu tema é comprado? Porque ficam surgindo vários códigos estranhos que estão quebrando o layout em alguns pontos.
1 curtida
Estranho mesmo José. O tema é comprado. Mas eu estou seguindo o próprio manual deles. Ai quando dou uma trava peço socorro.