#01 Customização - menu Departamento e Cabeçalho

#01 Customização - menu Departamento e Cabeçalho

Escrito por Antonio, em

Alguns poucos passos para customizar campos do menu e Cabeçalho de forma simples

#Customização 1 - menu Departamento e Cabeçalho

Alguns poucos passos para customizar campos do menu e Cabeçalho de forma simples


Este é a nossa loja de calçados a, Calcados.loja.global.

Neste post vamos verificar algumas propriedades simples do CSS, como eles e border e background que vai ser bastante usados.
*Não vai ser abordado aqui muito sobre o que é CSS e tags HTML*
Onde acessar a customização. Pagina Inicial > Customização – Vai ser nas áreas de (Adicional 1 a 8)

Como saber o nome e de que campo de trata para personalizar ele? Aperte F12 do teclado e na aba de Elements que vamos achar os id e class dos campos que desejamos:
navprincipal , ts-div-logo, ts-div-login-cesta, estas são algumas das que vamos usar.


Vamos começar  colocando um fundo no cabeçalho (embora já exista um config para esta situação).
<style>
   #navprincipal{
       background:  #c1c1c1 !important;
   }
</style>

Para colocar o css sempre usar dentro de <style></style>
Existe 3 formas de colocar a customização de um elemento:
1 - se o elemento for id, tem que ser #nome; (no exemplo acima o navprincipal se encaixa aqui)
      #navprincipal{
            background:  #c1c1c1;
      }
2 - se o elemento estiver dentro de um class, tem que ser .nome; (ponto)
      .navprincipal{
            background:  #c1c1c1;
      }
3 - e falando diretamente com uma tag; (neste exmplo todos os <h1></h1> vai estar com o fundo cinza)
      h1{
            background:  #c1c1c1 !important;
      }

E o resultado do nossa Cabeçalho ficou assim:


Sendo assim vamos fazer as seguintes estilizações, na Barra de Pesquisa, Botão Pesquisa, Botão Login, Botão Cesta/Carrinho, o código utilizado vai ser o seguinte:

E o resultado foi o seguindo, usando entre apenas: border (borda), background(fundo) e color (cor);

Agora vamos fazer a mesma coisa com o menu de Departamento usando o mesmo conceito e propriedades usados no Cabeçalho.
Foi colocado o background do #navmenu da mesmo cor do tênis do logo.
Seguindo com uma verde nos nomes dos departamentos e o laranja  na cor dos setores usando o color.