Main Wrapper - Área de Postagem

Hoje vou mostrar como personalizar a área de postagem, esse vai ser mais um post da 'saga' Códigos Básicos. Lembrando que eu uso o Template Mínima do Blogger como base (aquele primeiro dos modelos disponibilizados!). Vamos lá!


Basicamente são dois trechos que se tratam desse elemento o primeiro é a área total de post e outro os elementos de dentro do post (título, data), para esse post não ficar muito extenso dividirei em dois posts. Esse será sobre a área total de post (MAIN-WRAPPER):

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Nesse trecho é possível basicamente:

Alterar o tamanho da coluna de post - para fazer isso é só mudar o número na parte destacada em vermelho.
Atenção: Cuidado na hora de fazer isso, lembre-se do total do seu template (outer-wrapper) e das margens para não deixar seu template desalinhado e todo torto!

Colocar um background (fundo) - isso é bem simples também, adicione 'background' a esse trecho como mostrado abaixo:

Cor:
background: #000000;

Imagem:
background: url (IMAGEM) repeat;

Ficará assim:

#main-wrapper {
background: #000000;
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

ATENÇÃO: Para mais informações sobre como alterar o background clique aqui e procure por background no post!

Adicionar borda - Isso também é simples, é só adicionar a seguinte opção no trecho:

border: 1px solid #000000;

Ficará assim:

#main-wrapper {
background: #000000;
border: 1px solid #000000;
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Para saber como modificar as opções de borda clique aqui.

Mudar o posicionamento das postagens - isso já é um pouco mais complicado, e vai depender muito do seu template.
O posicionamento é definido pelo FLOAT. No Mínima, as postagens estão a esquerda da coluna, ou seja, ÁREA DE POSTAGEM - COLUNA por isso está float: $startSide;.

Como no Mínima:
Se no seu está assim também e você quer que seja COLUNA - ÁREA DE POSTAGEM, mude o $startSide para $endSide.
Só que será necessário mudar também a coluna (sidebar), provalvemente estará assim:

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Mude o $endSide para $startSide, visualize, e veja como ficou!

Diferente do Mínima (Left, Right):
Se o seu template não está $endSide - $startSide, mas sim Left (direita) - Right (esquerda), como abaixo:

#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Altere Right e Left como preferir. E pronto o posicionamento fica como você preferir!

Adicionar/ Alterar margin - talvez a área de postagem precise de margens, ou seja, ficar mais longe de determinado elemento ou mais perto. Lembre-se que margem é a relação entre um elemento e outro (coluna e área de postagem, por ex.).
Adicione o trecho abaixo em main-wrapper, caso já haja esse trecho você apenas modifica os valores:

margin: 0px 0px 0px 0px;

Modifique 0 (zero) para o número que você quiser, sempre visualizando antes de salvar, para ver o resultado!
Lembrando que na linguagem do código o sentido é horário, ou seja, o primeiro é topo, segundo direita, terceira abaixo e, quarto esquerda!
É provável que para alinhar as postagem você precise também alterar a margem da coluna, faça isso da mesma forma que modificou a área de postagem.

Adicionar/ Alterar padding - padding é a distância das bordas da área de postagem para seus elementos internos. Para alterar é o mesmo esquema da margem.

Padding: 0px 0px 0px 0px;

Por esse post é isso, esses são basicamente os elementos que podemos mudar na área total de postagem, no próximo post explicarei como alterar os elementos internos!
Dúvidas, já sabem, só falar!

Até a próxima!