Ei, pessoal! Tudo bem?
Um pouquinho atrasado, mas hoje temos a segunda parte do tutorial de como fazer o seu próprio layout. Resolvi continuar explicação pelo mesmo jeito que sempre faço os meus. Sempre edito pela ordem que vai aparecendo no Template Mínima. Acho mais fácil de localizar tudo e manter a organização na hora de editar tudo. Lembrando que o tutorial é extenso e será explicado de forma muito (muito mesmo) fácil. Então vamos em frente.
Atributo Body
O body é o elemento responsável por ser o container de tudo que é conteúdo do site. Ou seja, o que está dentro do <body> é o que fica ou ficará disponível para visualização do visitante. Vale lembrar: o body é uma tag HTML e como tal, aceita atributos. Por isso, se você quer definir um padrão para o site, pode colocar os atributos nessa tag.
1. Background
A parte mais fácil de fazer no template é adicionar o background, pois o mesmo só poderá ser uma cor ou uma imagem.
background: $bgcolor;
Onde o
$bgcolor é o atributo padrão do template mínima, basta altera-lo para o código da cor que deseja. Se você quiser adicionar o link basta usar:
background: url(link-da-sua-imagem-aqui);
O atributo background tem vários características e você pode encontra-las de forma detalhada
nesta página aqui.
2. Links
Seguindo do
body, temos os atributos para os links em geral. Um link visitado, não visitado, ativo ou no estado hover pode assumir aspectos diferentes (cores, fundos, etc...). Para não ficar extenso, você pode ver
suas propriedades aqui.
Header: o cabeçalho do layout
O cabeçalho por padrão fica dentro do
#outer-wrapper. Ali também contém a área da postagem, a sidebar e footer. Por isso, se você aumentar o tamanho do
#header-wrapper ele vai ficar com uma parte "escondida" por não caber no valor declarado no
#outer-wrapper. Ou seja, a forma mais simples de resolver é você lembrar de alterar o valor atribuído lá também.
#header: é o cabeçalho do blog, onde costuma ficar o título do blog. É o topo do blog. Geralmente fazem parte do trecho de cabeçalho as seguintes variáveis:
#header-wrapper: corresponde a toda a área do cabeçalho.
#header-inner
#header: corresponde a coluna dentro do cabeçalho.
#header h1: corresponde ao nome do cabeçalho (título do blog).
#header a: corresponde ao link do nome do cabeçalho.
#header .description: corresponde a descrição do blog que fica dentro do cabeçalho.
Designer de modelo:
.header-outer: área do cabeçalho
.header h1: título do blog
.header h1 a: link do nome do cabeçalho
.header .description: descrição do blog
Outer wrapper
Seguindo o template, vem o
#Outer-Wrapper que, assim como foi dito mais acima, é a área total das colunas. Geralmente abrange toda a área do cabeçalho, coluna de postagens, sidebar e footer. Sendo assim, qualquer alteração que você fizer com realação a largura dos atributos citados, vai ser necessário alterar a largura do
#outer-wrapper. Se você aumentar a largura do post e da sidebar, mas não alterar a largura do #outer-wrapper, o seu layout vai ficar todo desalinhado. Muito confuso? Veja o exemplo:
Note que, na versão original, a soma do
width (largura) do
Main e da
Sidebar é menor do que o valor do
Outer. Já na versão alterada, a soma ultrapassa o valor. Se você fizer o teste, vai perceber que o seu layout vai ficar todo desajustado. Por isso é importante lembrar de manter a largura do Outer igual ou superior a soma do
Main e da
Sidebar.
Observação: Isso também serve para o
Footer. A largura total dele deve ser igual ou menor que a largura do
Outer.
É isso. Na próxima semana tem mais.
Beijos
/https://skoob.s3.amazonaws.com/livros/1035724/DE_SANGUE_E_OSSOS_15761436291035724SK1576143629B.jpg)
