Personalizar sidebar e áreas das postagens

http://weheartit.com/entry/77316261/via/Erica_Judd - OBS: Imagem colorida nem combinou com o lay do blog u.u kkk

Hey! Que tal mudar um pouco sua sidebar (Sidebar é a barra lateral, onde ficam os gadgets) e a área dos post? É legal para mudar um detalhe que faz toda a diferença!

Primeiro em que saber de que lado é a sua sidebar para personaliza-la

Sidebar direita

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

Sidebar esquerda

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

Todos dos códigos para personalizar sua sidebar vão abaixo do código acima (lembrando que você tem que saber qual lado é sua sidebar, a esquerda ou a direita. Se for esquerda cole debaixo do código na sidebar esquerda e vice verso)
Você pode fazer várias coisas na sidebar, deixar colorida, deixar ou tirar fundo, colocar margem, deixar redondo...
Lembrando, você clica em MODELO, EDITAR HTML e escolhe qual sidebar que você quer personalizar. Se você nunca mexeu no HTML da sua sidebar deve esta mai ou menos assim: (Esta é a barra lateral direita)

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
  margin-left: $(content.padding);
  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;

Mudando fundo

Você pode fazer isto no designer do modelo ou 'manualmente'.

Mude isto:

 background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;

Para colocar imagem:

 background: url (URL_DA_IMAGEM); repeat;

Se você quiser colocar uma cor, você coloca o código da cor. Para ver o código das cores clique aqui.

Exemplo:

background: #FFFFFF;

Este é com o fundo branco. Você muda pelo código da cor.

Quer tirar o fundo? Deixe assim:

 background: ;

Deixando redondo:

O blog Place Fame fez uma postagem indicando um site que fica bem mais fácil para saber onde deixar redondo. Site aqui.
Você vai escolher o numero que você quer o quanto fique redondo, depois cole abaixo do código da sidebar.

Exemplo:

-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;

Colocando borda:

Tem varias formas de borda (isto é, de personalizar).

Bordas de todos os lados:

border-top: 5px solid #FF1493;
border-bottom: 5px solid #FF1493;
border-left: 5px solid #FF1493;
border-right: 5px solid #FF1493;

Você muda o valor '5', quanto maior, mais grosso. O 'solid' é a forma, que é a reta. Os últimos números é a cor. Se você quiser a borda só em cima, coloque apenas o código que é referente a borda pra cima.

Deixando Gadgets separados com fundo - Place Fame

Vá até Design > Editar HTML, aperte ctrl + f e escreva  /* Widgets
Lá vai esta com um código parecido com este:

/* Widgets
----------------------------------------------- */
.sidebar .widget {
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0;
}

Apos esta ultima linha acrecente background-color: #COR_HTML; Vai ficar assim:

/* Widgets
----------------------------------------------- */
.sidebar .widget {
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0;
background-color: #COR_HTML;
}

Area das postagens

Basicamente é o mesmo tutorial. O que muda é que em vez de colocar abaixo dos códigos de sidebar, você vai colocar abaixo desde código, que é o da área das postagens.

.main-inner .column-center-outer {

Personalizem muitooo seus blogs! Querem alguma postagem ou tutorial? COMENTA!
Bezôôs,

Erica Lima♥