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;
}
.png)
créditos da Kawaii the world