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 SublinhadoRiscadoe 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 ;
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;
}
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;
}
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 ♥
Me ajudoou muito! Serio, vc nao usa photoshop? fireworks para criar os templates?
ResponderExcluirNão , uso só o Photoscape na hora de fazer o cabeçalho e algumas imagens , o resto é tudo HTML mesmo :) beijinhos ♥
ExcluirNossa e tem como fazer cabeçalho e tal com photoscape ? Pra mim fazer os layout eu uso o photoscape e o photoshop me ajuda bastante , mas só o photoscape nem sabia .
ResponderExcluirAh! Já te coloquei em afiliados.
Beijinhos ♥
Haha tem sim lindona , eu fiz esse meu usando somente o photoscape , é muito fácil é só deixar a imaginação fluir haha' >.< beijinhos , ok linda ♥
Excluir