Criando um lay estilo o meu #02

Oieeeeeeee gente ~~animada hoje~~ sentiram minha falta? (cala a boca Gleicy) estão bem? espero que sim *-* Bom os prêmios do sorteio estão quase todos prontos \o/ segunda eu entrego somente os goodies que vão se postados pouco a pouco, mas um dos lays eu já terminei e estou acabando o outro!

 Então hoje eu trouxe a segunda parte de como fazer um layout (ah jura?) quem não lembra do primeiro post vá aqui e relembre haha' 

vamos começar? Continue lendo

Então como já editamos o travel e colocamos um bg, vamos aos detalhes, vamos personalizar a sidebar!

Que tal essas bordinhas como eu uso nos posts e na sidebar? vou ensinar

Primeiro você vai ter que separar os gadgets da sidebar se não vai ficar estranho hahahaha'

Siga esse tuto aqui 

Separou direitinho? vamos colocar as bordas.

Na sidebar

Vá no seu HTML >> clique em alguma parte dele>> e tecle ctrl + f vai aparecer uma caixinha de pesquisa dentro do código assim 

Procure por ]]></b:skin> e ACIMA cole

.sidebar .widget {
background:#fff; /*--------Cor do fundo------*/
border-top: 5px solid #d4bfb1; /*------------Cor da barra de baixo------*/
padding: 5px; /*------------Espaço interno------*/
margin-left: -13px; /*------------Espaço externo da esquerda------*/
margin-top: 0px; /*------------Espaço externo de cima------*/
margin-bottom:25px; /*------------Espaço externo de baixo------*/
border-radius:2px; /*-------------Arredondamento do gadget--------*/
border-bottom: 5px solid #b1d4b3;
box-shadow: inset 0 0 6px #e2e1e1, 0 0 1px #ccc;
}

Edite apenas onde se pede! ou seja as cores

Veja que o ultimo gadget fica sem a barrinha de baixo e.e vamos por a barrinha dele

procure por .sidebar .widget:last-child {

Aparecerá algo mais ou menos assim

.sidebar .widget:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;

Logo apos achar, você devera colar esse código  abaixo de padding-bottom: 0; 

background:#fff; /*--------Cor do fundo------*/
border-top: 5px solid #d4bfb1; /*------------Cor da barra de baixo------*/
padding: 5px; /*------------Espaço interno------*/
margin-left: -13px; /*------------Espaço externo da esquerda------*/
margin-top: 0px; /*------------Espaço externo de cima------*/
margin-bottom:25px; /*------------Espaço externo de baixo------*/
border-radius:2px; /*-------------Arredondamento do gadget--------*/
border-bottom: 5px solid #b1d4b3;box-shadow: inset 0 0 6px #e2e1e1, 0 0 1px #ccc;
}

Edite as cores e salve! pronto você tem uma sidebar cute! para personalizar o titulo dos gadgets como os meus use esse tuto. Para fazer uma gadget "Welcome" legal siga essas dicas.

Vamos colocar a barrinha nos posts também???

No HTML procure por .main-inner .column-center-outer {

Depois que achar o código apague ele até o fechamento da chave { 

e cole esse no lugar

.post-outer {margin: 4px 2px 30px;padding: 10px 10px;background:#ffffff;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;er-top: 5px solid #b1d4b3; /*------------Cor da barra de baixo------*/border-radius:2px; /*-------------Arredondamento da área--------*/border-bottom: 5px solid #b1d4b3;border-top: 5px solid #d4bfb1;box-shadow: inset 0 0 6px #e2e1e1, 0 0 1px #ccc;}

Edite onde se pede! 

Pronto você tem bordinha na sidebar e na área dos posts.

Créditos: CB e Prince Teen

Terão mais duas partes de como personalizar o layout! aguardem.