Big tutorial II - Criando Um template -Parte 1

Eu sei que eu já tinha postado sobre isso , mas hoje , eu vou postar um layout completo , e ainda , vou trazer alguns códigos para ficar mais completo .
Primeiro , você irá escolher o modelo travel :

(modelo em vermelho)

Repare que este modelo , há uma bordinha de papel , vamos retira-lá :

Vá em seu HTML e procure por :

    apague aonde está em vermelho .

Visualize , se estiver tudo certo , salve.

Muita gente me pergunta , por que usar o modelo travel . Acontece que todos os códigos pegam neste modelo e ele é muito bom!

Agora , vamos colocar um background ?

Modelos :

Vamos ver como ficou?

Agora , faça uma postagem teste com negrito , itálico , sublinhado , tachado , bloquote e leia mais.

repare que o fundo ficou transparente . Agora eu vou ensinar como fazer o fundo ficar branco e colocar bordas nas postagens e ao mesmo tempo separa-las .

 Vá em seu HTML e procure por :

.main-inner .column-center-outer {

  background: $(post.background.color) $(post.background.url) repeat scroll top left;

  _background-image: none;

}

Apague todo esse código e no lugar cole :

.post-outer {

margin: 4px 2px 30px;

padding: 10px 10px;

background:#Cor;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

er-top: 5px solid #Cor; /*------------Cor da barra de baixo------*/

border-radius:2px; /*-------------Arredondamento da área--------*/

border-bottom: 5px solid #Cor da Borda de Cima;

border-top: 5px solid #Cor da Borda de Baixo;

box-shadow: inset 0 0 6px #Cor, 0 0 1px #Cor;

}

Para colocar esse efeito na sidebar , procure por :

]]></b:skin>

  e em cima da tag , cole :

.sidebar .widget {

background:#Cor; /*--------Cor do fundo------*/

border-top: 5px solid #Cor da Borda de cima; /*------------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 #Cor da Borda De Baixo;

box-shadow: inset 0 0 6px #Cor, 0 0 1px #Cor;

}

Repare que , quando você coloca o efeito na sidebar , fica atráz um fundo branco que atrapalha , para tira-lo , é só ir em personalizar > avançado > plano de fundo da barra lateral . Coloque em transparente .

Vamos personalizar a sidebar ? Primeiro , eu achei alguns modelos no Kawaii World :

.sidebar h2 {
font-family: Tahoma;
text-transform: uppercase;
letter-spacing: 3px;
color: #ccac90;
border-bottom: 1px dotted #c8bcb2;
font-size: 11px;
text-align: center;
word-spacing:.4em;
-webkit-transition-duration: .50s;
}
.sidebar h2:hover {
letter-spacing: 6px;
color: #b39478;
   -webkit-transition-duration: .50s;
}

@font-face {font-family: "beat"; src: url('http://static.tumblr.com/0xqvkot/qoCmj9gu6/altehaasgroteskregular.ttf');}
.sidebar h2 {
font-family: beat;
text-transform: uppercase;
letter-spacing: 3px;
color: #f38a97;
text-shadow:0 1px #cccccc;
border-bottom: 1px solid #e5e5e5;
font-size: 13px;
text-align: center;
word-spacing:.4em;
-webkit-transition-duration: .50s;
}
.sidebar h2:hover {
letter-spacing: 1px;
color: #d0d0d0;
   -webkit-transition-duration: .50s;
}

.sidebar h2 {
font-family: Tahoma;
font-size: 14px;
color: #aeaeae;
text-transform: uppercase;
text-shadow:0 1px #dbdbdb;
background-color: #f4f4f4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 5px;
margin: 2px;
border-bottom: solid 1px #e3e1e2;
text-align: center;
-webkit-transition-duration: .50s;
}
.sidebar h2:hover {
color: #d9d8d9;
   -webkit-transition-duration: .50s;
}

Agora , vamos personalizar a área da postagem .

Primeiro , vamos retirar o ''compartilhar postagem''

Agora , vamos personalizar o negrito , itálico , sublinhado e tachado ?

Bom , eu achei o tuto no Designer Lovers  , e ele fica com uma sombra *-*

/* Personalização por Designer Lovers */

b { /*Estilo do negrito */

color:#Cor;

cursor: help;

text-shadow: 0px 0px 1px #Cor da sombra;

-webkit-transition-duration: .60s;

}

b:hover { /*Estilo do negrito quando passa o mouse */

color:#Cor;

cursor: help;

text-shadow: 0px 0px 1px #Cor da sombra;

-webkit-transition-duration: .50s;

}

i { /*Estilo do itálico */

color: #Cor;

cursor: help;

text-shadow: 0px 0px 1px #Cor da sombra;

-webkit-transition-duration: .50s;

}

i:hover { /*Estilo do itálico quando passa o mouse */

color: #Cor;

cursor: help;

text-shadow: 0px 0px 1px #Cor da sombra;

-webkit-transition-duration: .50s;

}

u { /*Estilo do sublinhado */

color:#cor;

cursor: help;

text-decoration: none;

border-bottom: 1px dotted #Cor do sublinhado;

text-shadow: 0px 0px 1px #cor da sombra;

-webkit-transition-duration: .50s;

}

u:hover { /*Estilo do sublinhado quando passa o mouse */

color:#Cor;

cursor: help;

text-decoration: none;

border-bottom: 1px dashed #Cor do sublinhado;

text-shadow: 0px 0px 1px #Cor da sombra;

-webkit-transition-duration: .50s;}

s, strike { /* Estilo do riscado */

color: #Cor; 

cursor: help; 

text-shadow: 0px 0px 1px #Cor da Sombra;}

/* Fim do código, se usar credite! */

Agora , vamos personalizar o bloquote .

Esse tutorial , achei no Sweet Girl :

.post blockquote {

background: #Cor; /* fundo */

padding: 3px; /* acolchoamento */

border-left: 13px solid #Cor; /* espessura, tipo e cor da borda esquerda */

border-right: 13px solid #Cor; /* espessura, tipo e cor da borda direita */

transition-duration: 1s; /* transição */

-moz-transition-duration: 1s; /* transição */

-webkit-transition-duration: 1s; /* transição */

}

.post blockquote:hover { /* quando o mouse passa por cima */

border-left: 13px solid #Cor; /* espessura, tipo e cor da borda esquerda */

border-right: 13px solid #Cor; /* espessura, tipo e cor da borda direita */

}

Vamos agora , personalizar o leia mais .

Aprendi no Sixteen Springs 

Procure por ]]></b:skin>

.jump-link  {
text-align: left; /* posicionamento do leia mais */
margin-top: 15px; /* espaço que fica entre o leia mais e a postagem */
margin-bottom: 15px;
}
.jump-link a {
padding: 4px; /*acolchoamento entre o fundo e o texto */
color: #ff7db7 ; /* cor do texto */
background: #fff; /* cor do fundo */
font-family: arial; /* tipo de letra */
box-shadow: inset 0 0 2px #eee, 0 0 2px #ccc;  /*cor da borda*/
-moz-border-radius:  3px; /* bordas arredondas */
-webkit-border-radius:  3px;  /* bordas arredondas */
border-radius: 3px;  /* bordas arredondas */
}

Bom , agora , vamos tirar o sublinhado dos links e personaliza-los .

Primeiro , vá em seu HTML e procure por : 

Underline .

Todos que estiverem com Underline , troque por None .

Vamos personalizar os links ?

Procure por 

a:link {

Agora , apague todo esse código :

 a:link {text-decoration:none;color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:underline;
color: $(link.hover.color);
}

Cole no lugar :

a:link {color: #E9A1C0; /* Cor do link*/text-decoration: none;-webkit-transition: color 0.7s ease-out;-moz-transition:color 0.7s ease-out;transition: color 0.7s ease-out;}a:visited {color: #33CCCC; /*Cor dos links visitados*/text-decoration:none;filter:alpha(opacity=100);-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;}a:hover {color: #707070; /*Cor do link quando passa o mouse*/text-decoration:none;filter:alpha(opacity=100);-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;}

Para mudar os links da sidebar , procure por :

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