Customizar Menu Superior e Lateral

Layout
1

Bom dia comunidade!
Em primeiro lugar obrigado pelas milhares de dicas que consegui aqui, muito valiosos.

Minha dificuldade, que parece simples demais, mas que não consigo desenrolar: quero mudar a cor de fundo do menu superior e de elementos do menu lateral (descrição das categorias e newsletter), porém nenhum dos códigos que testei funciona.

Achei threads antigos sobre o tema aqui no comunidade, outros no Youtube, mas não funcionaram, talvez porque a forma de integrar o código mudou (não tem mais a opção de indicar que é um código CSS?)

Agradeço qualquer tipo de ajuda, e/ou redirecionamento para outros tópicos.

Bom dia a todos!

Pierre-Jean

2023-06-12 09_36_26-Apresentação1 - PowerPoint
2023-06-12 09_36_26-Apresentação1 - PowerPoint1383×683 46.6 KB

2

O Plano da sua loja integrada é pago?

1 curtida
3

Sim, é pago mesmo. Tenho acesso aos editores.

1 curtida
4

Vai em Personalização > Incluir Código HTML > Criar Código > Seleciona Rodapé, CSS e Todas as Páginas> Depois cola o seguinte código:

/*Para trocar cor de fundo do menu superior*/
.menu.superior {
    background: #Código da Cor;
}

/*Cor da fonte do texto do menu superior*/
.menu.superior .titulo {
    color: #Código da sua cor;
}

/*Fundo do Newsletter*/
.componente.newsletter.borda-principal {
    background: #Código da sua cor;
}

/*Título e ícone da Newsletter*/

.componente.newsletter.borda-principal span.titulo.cor-secundaria {
    color: #Código da sua cor;
}

/*SubTítulo da Newsletter*/

.componente.newsletter.borda-principal p.texto-newsletter.newsletter-cadastro {
    color: #código da sua cor;
}

/*BOTÃO DA NEWSLETTER*/

.newsletter .botao {
    background: #SUA COR;
    color: #SUA COR;
}
3 curtidas
5

Muito obrigado, funciona muito bem! Salvou a vida! Porém adicionou uma borda lateral que não estou conseguindo tirar :-/

Nota: aproveitei e usei a ferramenta de inspeção, e consegui mudar também o fundo dos descritivos de categorias no menu lateral também, me sinto hackerman :smiley:

Isso não funcionou na borda do quadro de busca, tentei com o .busca, .borda-alpha, mas parece que a pegada é diferente… parece até uma forma e não uma linha, mas sou muito leigo para fazer a diferença.

Se conseguir me orientar nesses 2 pontos, eu ficaria muito grato, mas agradeço novamente pela ajuda que já deu! :smiley:

Pierre-Jean

2023-06-12 21_16_15-Apresentação1 - PowerPoint
2023-06-12 21_16_15-Apresentação1 - PowerPoint1268×545 80.6 KB

6

adiciona mais o seguintes códigos no mesmo lugar que tu adicionou os anteriores, segue o código:

.menu.superior .nivel-um>li {
    border: none !important;
}

#cabecalho .busca {
    background: none;
    border: none;
}
3 curtidas
7

Muito obrigado, funcionou perfeitamente!
Ótimo dia para você!

Seguindo no Insta :wink:

8

Olá! Aproveitando a dúvida do amigo lá em cima, gostaria de saber como é o código para mudar o tamanho e a fonte do menu superior. Agradeço desde já se puder nos ajudar!

9 
#cabecalho .menu.superior .nivel-um>li>a strong {
    font-size: 13px;
    color: #código da sua cor;
}

No tamanho da fonte, vai aumentando o px

3 curtidas
10

Aproveitando o tópico: existe possibilidade de alterar o posicionamento da descrição da categoria?

Hoje, por padrão, ela fica no lado esquerdo. Gostaria de jogá-la para o final da página.

2 curtidas
11

sim é possível, manda o link de uma categoria que tenha descrição

1 curtida
12

Olá, Maurício. Obrigado pelo retorno.

Segue link de uma categoria:

1 curtida
13

desculpe a demora, segue abaixo:


$(document).ready(function(){
  $("#corpo > div > div.secao-principal.row-fluid.sem-coluna > div.coluna.span3 > div.componente").prependTo("#corpo > div > div.secao-principal.row-fluid.sem-coluna > div.conteudo.span9 > div.ordenar-listagem.rodape.borda-alpha > div > div");
  });

Resultado esperado:

image
image1039×503 61.7 KB

2 curtidas
14

@Mauricio_Pereira , muito obrigado!

Uma dúvida: neste exemplo que envio abaixo, a descrição aparece desta forma por conta da personalizadação do tema, é isso?

image
image1918×879 147 KB

1 curtida
15

acredito que esteja falando do alinhamento do texto, se for isso é um ajuste no CSS:

#corpo > div > div.secao-principal.row-fluid.sem-coluna > div.conteudo.span9 > div.ordenar-listagem.rodape.borda-alpha > div > div > div.componente > div > p{
  text-align: justify;
}

Resultado esperado:

image
image1150×399 39.8 KB

Espero ter ajudado.

3 curtidas
16

@Mauricio_Pereira , obrigado pela ajuda. O texto justificado já fica visualmente melhor.

Naquele print que eu enviei, na descrição há palavras em negrito, a cor de fundo acompanha a mesma cor da página e também não há o ícone da ‘folha’ no lado superior direito.

Minha dúvida: consigo fazer neste mesmo molde ou isso só é possível trocando de tema?

17

é possível fazer essa modificações sim veja:

#corpo > div > div.secao-principal.row-fluid.sem-coluna > div.conteudo.span9 > div.ordenar-listagem.rodape.borda-alpha > div > div > div.componente > div > p{
  text-align: justify;
}

#corpo > div > div.secao-principal.row-fluid.sem-coluna > div.conteudo.span9 > div.ordenar-listagem.rodape.borda-alpha > div > div > div.componente > div > h4 > i{
  display: none !important;
}
#corpo > div > div.secao-principal.row-fluid.sem-coluna > div.conteudo.span9 > div.ordenar-listagem.rodape.borda-alpha > div > div > div.componente{
  background-color: #definaaquisuanovacor;
}
3 curtidas