Qual o código para alterar cor de fundo do cabeçalho + botão buscar e icones?

Layout
1

Bom dia! Preciso de ajuda para alterar a cor de fundo do cabeçalho, também a cor do botão buscar e a cor dos icones. Não entendo de códigos e CSS, se alguém puder me ajudar com o código para editar, ficarei grato.

Eu preciso da cor de fundo nesse tom de amarelo #f4cf5d
o botão buscar preto com a palavra buscar em branco e os ícones do cabeçalho, verdes.

image
image1280×720 222 KB

Agradeço desde já!

2

Faz um teste com esse código:

/*Altera cor do Cabeçalho*/
#cabecalho .conteiner {
    background: #f4cf5d;
}
/*Altera botão Buscar*/
#cabecalho .botao.botao-busca.icon-search.fundo-secundario:after {
    background-color: #000;
    color: #fff;
}

Quanto aos ícones, eles estão salvos como imagem nesse link: https://cdn.awsli.com.br/534/534474/arquivos/spriteshead.png
Você precisa ver se dá para alterar essa imagem pelo painel ou se é preciso alterar via código.

2 curtidas
3

Deu certo no desktop, muito obrigado!
Na versão mobile, não alterou a cor do fundo. Poderia me ajudar por favor?

1 curtida
4

Nossa, verdade, esqueci de testar no mobile. Tenta adicionar esses códigos:

@media only screen and (max-width: 767px) {
    .atalhos-mobile ul {
        background-color: #f4cf5d;
    }
    .atalhos-mobile li.fundo-principal {
        background-color: #f4cf5d;
    }
    #cabecalho .conteiner {
        background-color: #f4cf5d;
    }
    .menu-mobile {
        background-color: #f4cf5d !important;
    }
}
2 curtidas
5

Deu certo! Muito obrigado de verdade! Que Deus te abençoe camarada, ajudou demais.
Abraço

1 curtida
6

Oi Jose Claudio, tudo bem? olhando a solução que deu para o colega da loja de peças, gostaria de saber se você sabe como deixar o itens do cabeçalho alinhados, um ao lado do outro (Atendimento, Minha conta e Carrinho), vide imagem abaixo. Se puder me ajudar, ficaria imensamente grata!!! Vou te colocar em minhas orações!
Obrigada :wink:

Sem título
Sem título1366×765 202 KB

7

Não. Esse código que você precisa é um pouco mais avançado porque mexe na estrutura HTML da sua loja. Provavelmente você vai precisar de algum programador para refazer toda essa seção via JavaScript.

1 curtida
8

legal. obrigada :wink: Jose Claudio

9

Qual código você colocou para colocar esse botão de central do atendimento?

10

Oi! vi qua você conseguir modificar o cabeçalho teria com me ajudar, por favor.