18 de dez de 2012

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
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 ;

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 ♥





                                                                         


















4 comentários:

  1. Me ajudoou muito! Serio, vc nao usa photoshop? fireworks para criar os templates?

    ResponderExcluir
    Respostas
    1. Não , uso só o Photoscape na hora de fazer o cabeçalho e algumas imagens , o resto é tudo HTML mesmo :) beijinhos ♥

      Excluir
  2. Nossa 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 .

    Ah! Já te coloquei em afiliados.
    Beijinhos ♥

    ResponderExcluir
    Respostas
    1. 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