
#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.