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.
0 comentários:
Deixe um comentário