Como fazer seu próprio template parte ||

               

Oi fofas , tudo bem ? Eu to bem só com um pouco de cólica , falando nisso alguém tem uma dica de um remédio para me indicar O.o rs' , bom hoje venho trazendo a segunda parte de "como criar um template" espero que gostem


Bom se vocês seguiram a primeira parte , você já tem mais o menos isso

Então agora nós vamos personalizar as seguintes coisas ;

Sidebar

Centralizar o titulo dos posts e dos Gadgets 

Menu

e 

Separar a areá das postagens 

Indico que agora vocês façam uma postagem de teste e aplique Negrito Itálico Sublinhado Riscado e Blockquote 

Então vamos la , agora vamos personaliza a sidebar que no caso é a barra lateral 

Editar HTML aperte F3 e procure por ;

/* Widgets

Vai estar mais ou menos assim 

.sidebar .widget {

  border-bottom: 2px solid $(widget.border.bevel.color);

  padding-bottom: 10px;

  margin: 10px 0;

}

.sidebar .widget:first-child {

  margin-top: 0;

}

.sidebar .widget:last-child {

  border-bottom: none;

  margin-bottom: 0;

  padding-bottom: 0;

}

.footer-inner .widget,

.sidebar .widget {

  font: $(widget.font);

  color: $(widget.text.color);

}

.sidebar .widget a:link {

  color: $(widget.link.color);

  text-decoration: none;

}

.sidebar .widget a:visited {

  color: $(widget.link.visited.color);

}

.sidebar .widget a:hover {

  color: $(widget.link.color);

  text-decoration: underline;

}

Então apague todo esse código e no lugar cole o código da sua sidebar , temos duas opções 

.sidebar .widget {width:100% !important;background:#fff;border-bottom:5px #faafd0 solid;margin:15px 0 !important;border-radius:0 0 0 0;padding:10px;box-shadow: inset 0 0 16px #eee, 0 0 5px #ccc;overflow:hidden}.sidebar h2 {font-family: Verdana;font-size: 18px;color: #fff;background: url(http://i1234.photobucket.com/albums/ff411/SweetLG/84-1.png) no-repeat center;height: 25px;width: 300px;text-align: center;margin-top:-5px ;margin-left:-9px ;margin-bottom:10px;padding:5px;width:112%;}

.sidebar .widget {width:100% !important;background:#fff;border-bottom:10px #ffc0cb solid;margin:15px 0 !important;border-radius:0 0 0 0;padding:10px;box-shadow: inset 0 0 16px #eee, 0 0 5px #ccc;overflow:hidden}.sidebar h2 {font-family: Verdana;font-size: 18px;color: #fff;background: url(http://i1234.photobucket.com/albums/ff411/SweetLG/86.png) no-repeat center;height: 35px;width: 200px;text-align: center;text-shadow: 1px 2px 3px #dd8b99;margin-top:-12px ;margin-left:-25px ;margin-bottom:12px;padding:6px;width:115%;}

Créditos dos códigos e das imagens ;

Kawaii World 

Você pode estar modificando a cor da letra e a cor do seu background e a cor da borda

background:#fff;(Troque #fff; pela cor que desejar )border-bottom:10px #ffc0cb solid;(Troque #ffc0cb pela cor que desejar )color: #fff;(Troque #fff; pela cor que desejar )

O mesmo procedimento nos dois códigos !

Visualize se estiver tudo certo salve

A sua sidebar já estar personalizada , agora vamos centralizar o titulo do post e da sidebar ;

Editar HTML > f3 e procure por ;

/* Posts 

 Logo abaixo de    h3.post-title { cole o seguinte código

                                                                                                              

                                                                      

text-align:center;

           

} 

                                                                

Visualize se estiver tudo certo salve

Agora vamos passar para uma parte muito importante , que é  o menu tenho 3 tipos de menu e os seus tutoriais ;

Menu igual ao aqui do blog ; www

Menu express ; www

Menu lateral deslizante ; www

Depois do menu vamos para outra parte que é separar a areá das postagens 

                             Editar HTML > f3 e procure por ;

.main-inner .column-center-outer {

Ele vai estar mais o menos assim ;

.main-inner .column-center-outer {  
background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none; 
}

Apague este código e no lugar cole o código abaixo ;

.post-outer {
margin: 3px 8px 15px;
background:#fff;
padding: 5px 5px;
box-shadow: 1px 4px 19px 2px #DCDCDC;
padding: 5px;
border-radius: 50px;
}

As partes destacadas de rosa equivale a borda , 50px quanto mais você aumentar mais redonda ficará 

Só altere as cores , e o 50px . Tabela de cores ; www

Visualize se estiver tudo certo salve

Agora vocês já tem isso ;

Prontinho acabou meninas , essa é a segunda parte amanhã teremos a 3° beijinhos ♥