18 de março de 2013

Big tutorial II - Criando Um template -Parte 1


Bom dia . Esta bem cedo , acontece que eu sempre acordo cedo , mesmo estudando a tarde . Estou terminando Uma lição de ciências , aproveitei para postar aqui no Amizade de Menina . Gostei que a Débora fez o blog do Club Penguin , eu adoro jogar nele , meu penguin é assinante faz duas semanas , e eu tenho dó de gastar meu dinheiro no jogo , rs.

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

Vá mudando , e mude o Underline também .
Créditos : Blog da Girl

Continua.....

Um comentário:

  1. aaaaaaaaaaaah ameeeeeei, adoro quando você posta criando templetes é sempre útil !
    c; kiss

    ResponderExcluir

Comente a vontade, desde que saiba respeitar ;)
Ah, e não é necessário fazer uma conta para comentar, basta colocar como anônimo.

Emoticons:

♥❤∞ ☆ ★ ✖ 。◕‿◕。® ™ ☏✿゚✤
(◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●
⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙
≡(▔﹏▔)≡ ( ͡° ͜ʖ ͡°)