Barra pesquisa mais delicada

[zabe_moda_feminina]

Como deixar a barra de pesuisa mais delicada apenas com uma linha sem esse contorno e essa barra grosseira, queria deixar so o campo de pesquisa numa linha fina só com a lupa dentro

ZABE MODA FEMININA

[brenonovelli]

Fala Zabe! Segue um código para você testar. Abraço!

@media only screen and (max-width: 767px){
	.conteudo-topo .busca-mobile {
		background-color: transparent;
		padding: 0;
		margin-bottom: 2rem;
	  }

	  #form-buscar{
	  	border-bottom: 1px rgba(0,0,0,0.13) solid;
	  	border-top: 0;
	  }

	  .conteudo-topo .busca-mobile input#auto-complete{
	  	    border-radius: 0;
            border: none;
            box-shadow: none;
	  }

	  button.botao.botao-busca.icon-search.fundo-secundario {
	  	    border-radius: 50%;
			color: black;
			background: transparent;
	  }

	  .conteudo-topo .busca-mobile .atalho-menu {
          border-radius: .5rem;
      }


	}

Estou fazendo alguns vídeos das alterações que faço de ajuda aos lojistas para o pessoal ver e, quem sabe, aprender a fazer também. Tudo bem de eu usar esse caso? Abs

---

Quem quiser ver o processo desse ajuste pode ver aqui: https://www.youtube.com/watch?v=fvyOCFxZGYA

[zabe_moda_feminina]

Nossa ficou bem melhor! Muito obrigada!

[zabe_moda_feminina]

Voce sabe se tem uma forma de eu colocar um baner para mobile e outro para desktop ? no caso pra que cada um tenha o seu tamanho de baner

[brenonovelli]

Tem umas formas que não são tão simples nem prática. Pelo menos ainda não vi uma prática. A mais simples é adaptar para o container do banner para exibir bem os banners em todos os tamanhos. Nesse caso a arte deveria ser feita já pensando nessas dimensões.

[zabe_moda_feminina]

Não entendi nada rsrsrs Pode me explicar numa linguagem mais simples ? Eu não entendo nada disso

[brenonovelli]

Acontece.

Tem duas opções para serem feitas.

1. Você customizar o css para receber bem uma única arte. Esse site faz isso. É apenas uma imagem e fica bem em todos os tamanhos. Nesse caso o designer precisa respeitar uma área útil.

2. Através de um script você aceitar dois tamanhos de banners. Porém, esse é um método pouco prático pois você deixa de usar o gerenciador de banners e passa a enviar os arquivos pelo ‘upload de arquivos’.

[moreiramarii]

oie breno sou eu denovo, como eu faço para fazer isso ? onde eu altero ? quero deixa transparente o fundo e mudar as cores preta neste cinza #999999

[moreiramarii]

ficou assim, queriaa mudar onde ta cinza para preto

[brenonovelli]

Mudar o fundo da lupa?

[moreiramarii]

sim e nao, queria deixa tudo assim, na cor cinza #999

-alterar na versao mobili barra la em cima de cinza e menu
-e barra quando eu rolo para baixo a lupa ta preta

e outra coisa tbem se vc puder me ajudar com eu deixo "sobre a loja " para o canto esquerdo

[brenonovelli]

Bastante coisa, Mari. Tem que ir olhando os elementos no inspecionar e ir fazendo as alterações.

[moreiramarii]

Sim, vc pode me ajudar pq eu não entendo muito dessa linguagem e eu que estou montando meu próprio site, e só falta esses detalhes !

[A_Menina_da_Linhaca]

@brenonovelli desculpe minha ignorância, não manjo nada. Mas onde eu coloco esse código em minha loja. É em editor CCS?

[brenonovelli]

Isso. O tema da Zabe pode ser diferente do seu e o resultado ser diferente.

[A_Menina_da_Linhaca]

Entendi,
Mas Obrigado. To aprendendo muito lendo o retorno de vocês na comunidade.

Parabéns pelos videos.

[brunaamorimk]

Oi @brenonovelli, tudo bem?
Gostaria de deixar o menu de busca igual ao que você colocou o print com o código, mas o código não aplica pra mim

Ele mostra umas esclamações na hora que colo o código… Consegue me ajudar, por favor?

Você sabe me dizer como coloco o menu na barra flutuante e tiro ele do lado da busca? Falta só isso para meu site estar redondo… Se puder me ajudar, agradeço demais!

Segue print de como aparece o erro.

Muito obrigada!

[brenonovelli]

1. As exclamações podem ser apenas avisos. Nem sempre dão erro.
2. Pra eu entender o que está rolando, só vendo o código todo. Pode mandar ele todo aqui como código ou colocar na loja pra eu ver.
3. Reparou que no topo da sua loja tem um código css perdido? Talvez você tenha colocado no lugar errado ele.
4. Sobre o botão de menu, tem alguns tópicos aqui com esse tema que o pessoal resolveu. Como as alterações que eu já fiz nesse caso foram mais complexas, não teria como eu colocar tudo aqui. Mas é bem tranquilo de mover um elemento com jquery.

Semana passada mesmo eu dei uma arrumada num header mobile fazendo essa mudança também. Se tiver alguém safo pra dar uma fuçada e separar o código, pode ser uma boa. https://www.otreko.com.br/

[brunaamorimk]

@brenonovelli

Oi Breno, tudo bem?
Muito obrigada pelo retorno.
Respostas:

1. Eu tinha aplicado o código, esperei 30 minutos e ele não mudou nada no meu layout…
2. Acrescentei o código na minha loja e também deixo ele em cópia aqui abaixo.
3. Entrei pelo computador e pelo celular e esse código perdido não aparece pra mim… Onde estaria? Envio abaixo os prints de como eu vejo aqui.
4. Vou entender aqui, muito obrigada

@media only screen and (max-width: 767px){
.conteudo-topo .busca-mobile {
background-color: transparent;
padding: 0;
margin-bottom: 2rem;
}

  #form-buscar{
  	border-bottom: 1px rgba(0,0,0,0.13) solid;
  	border-top: 0;
  }

  .conteudo-topo .busca-mobile input#auto-complete{
  	    border-radius: 0;
        border: none;
        box-shadow: none;
  }

  button.botao.botao-busca.icon-search.fundo-secundario {
  	    border-radius: 50%;
		color: black;
		background: transparent;
  }

  .conteudo-topo .busca-mobile .atalho-menu {
      border-radius: .5rem;
  }


} 

[brenonovelli]

Verdade. O código sumiu. Logo mais dou uma olhada nesse teu código.