Personalizar Área total de Postagem (main)

Este é mais um post da serie sobre Variaveis CSS e os Elementos do Blogger para iniciantes.
Aqui vamos falar sobre a variavel “main” , que corresponde coluna da área total de postagem do blog.
Nos templates minima e na maioria dos templates modificados,este trecho está representado pela seguinte variavel:

 
#main-wrapper { 

Já nos templates Designer de Modelo,este trecho está representado por:

 
.main-outer { 

Nos templates Designer de modelo, existe a coluna central da área de postagem, que está representada pela variável

.main-inner 

Dependendo do modelo este trecho poderá estar assim:

.main-inner .column-center-inner 

Visualize a imagem abaixo para entender melhor qual área corresponde à coluna da área total de postagem do blog e a coluna central da área dos posts.

((Clique na imagem para ampliá-la))

A coluna da área total de postagem na imagem acima está personalizada com a cor amarela.
A coluna central da área total de postagem está personalizada na cor azul.

Alterar o tamanho da coluna na área total de postagem

Em .main-inner, (trecho em azul na imagem acima) você pode alterar o tamanho da coluna de post, aumentando ou diminuindo a largura desta coluna, e para isso você deve alterar os valores que estão em “width” (= largura).
Se você aumentar a largura da coluna central na área total de postagem, você deve observar qual a largura que está estipulada em #main-wrapper (ou .main-outer) e deve ajustá-las.Ou seja, você deve verificar qual a largura estipulada na coluna da área total de postagem do blog. Caso contrário seu template pode ficar com uma aparência desconfigurada e em alguns casos, a coluna da sidebar acaba indo parar abaixo da coluna de postagens. Portanto, sempre verifique os valores de width e ajuste-os de modo que a soma total das larguras das colunas não ultrapassem o valor estabelecido para largura.

Colocar fundo (background) na coluna da área total de postagem

Se você quiser, você pode colocar um background (fundo)na coluna da área total de postagem, acrescentando uma cor ou uma imagem, ou até mesmo as 2 coisas, mas para isso, você deverá acrescentar o elemento ‘background’ ao codigo CSS:

#main-wrapper -> templates mínima ou modificado
.main-outer -> designer de modelo

Veja exemplos:

 #main-wrapper { 
background: #36648B url (URL DA IMAGEM) repeat;
 } 

ou

 .main-outer { 
background: #36648B url (URL DA IMAGEM) repeat;
 } 

Caso queira incluir uma cor de fundo apenas para a coluna central da área de postagem, você deverá acrescentar o elemento ‘background’ ao codigo CSS:

.main-inner .column-center-inner {
background:#36648B;
padding:10px;
}

Adicionar borda na área total de postagem

é só adicionar a seguinte opção ao código CSS:
border: 1px solid #000000;

Adicionar ou Alterar margens na área total de postagem (margin e padding)

Se você achar que a área total de postagem( #main-wrapper ou .main-outer) ou a coluna central da área de postagem (.main-inner) precisa de margens, para ficar mais longe ou mais perto de determinado elemento, adicione o trecho abaixo (caso seu template já tenha esse trecho você apenas modificará os valores:
margin: 0px 0px 0px 0px;

Modifique 0 (zero) para o número que você quiser que fique sua margem, visualizando sempre antes de salvar, para ver o resultado que ficou.
Lembrando que na linguagem do código o sentido de Margin é horário, ou seja, o primeiro corresponde ao topo, o segundo corresponde à direita, o terceiro corresponde abaixo e, o quarto corresponde à esquerda!
[dica]Lembre-se “margin” corresponde à margem que é a relação entre um elemento e outro (coluna e área de postagem, por exemplo).
“padding” é a distância das bordas da área de postagem para seus elementos internos.[/dica]

Para alterar a distância entre bordas e os elementos internos (padding) faça o mesmo procedimento da margem.
Padding: 0px 0px 0px 0px;

Esses são basicamente os elementos que podemos alterar ou acrescentar na área total de postagem.