Aprendendo a Editar um Layout: Parte 2

by - julho 20, 2013




Bem, agora iremos editar o título das postagens e a sidebar

1- Modelo>> Editar HTML>>Ctrl+F>> procure por /* Posts
Você vai encontrar algo assim:


2- Para personalizar o título da postagem

Apague a seguinte parte:
h3.post-title {
  margin-top: 20px;
}

h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

h3.post-title a:hover {
  text-decoration: underline;
}

E substitua por:
h3.post-title {
text-align:center;
font:Parisienne;
font-size:22px; 
color: #5F9EA0;/*Se refere a cor da fonte*/
border-bottom: 1px dotted #f1b1c4; /*Linha abaixo do título*/
}

h3.post-title a {
 text-align:center;
font: Parisienne; 
font-size:22px;
color: #b7a8ca;/*Se refere a cor da fonte*/
text-shadow: 0px 0px 5px #f9d3de;/*Sombra*/
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;
}

h3.post-title a:hover {
 text-align:center;
font: Parisienne; 
font-size:22px;
color: #f09cb5;/*Se refere a cor da fonte*/
text-shadow: 0px 0px 5px #f9d3de;/*Sombra*/
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;
}


Depois salve. Faça uma postagem teste, e visualize.

Agora iremos personalizar a sidebar, a área onde ficam os Gadgets:

  2- Modelo>> Editar HTML>>Ctrl+F>> procure por /* Widgets

Apagamos a seguinte parte:

.sidebar .widget {
  border-bottom: 2px solid $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0;
}

E substituímos por:

.sidebar .widget {
  padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
  margin: 30px 0;
Background: #ffffff;
box-shadow: inset 0 0 29px #eee, 0 0 4px #b7a8ca;
border-bottom: 5px solid #fcc;/*Barra inferior*/
}
.sidebar .widget h2 {
background:#b7a8ca;/*Se refere a cor do fundo do título*/
color:#fff;/*Se refere a cor da fonte*/
font-size:16px;
text-align:center;
text-shadow:0 1px #ddd ;
margin-top:-12px;
margin-left:-13px;
margin-bottom:10px ;
padding:5px;
width:107%;
}

 Salve e visualize.

Bem, agora que vão começar as verdadeiras edições, até o próximo post.

Share
Tweet
Pin
Share
Tags :

You May Also Like

15 Comentários

  1. Elizze20 de julho de 2013 às 14:10

    Muito bom *-*

    ResponderExcluir
  2. lele20 de julho de 2013 às 14:21

    Estou amando 'u'
    Que lindo! =3

    ResponderExcluir
  3. - m a r i ♥20 de julho de 2013 às 14:24

    Foi bem útil! :3 Eu estava mesmo precisando de ajuda com os gadgets! *u*
    Beijos!
    Incrivelmente Mari

    ResponderExcluir
  4. Y20 de julho de 2013 às 15:59

    Ta ficado muiito legal
    Ta me ajudando pra caramba muito obg
    Bjjss

    ResponderExcluir
  5. yazzzz20 de julho de 2013 às 23:54

    muito útil a 1 parte também ta com umas duvida.
    ta me ajudando muito.

    ResponderExcluir
  6. Unknown23 de julho de 2013 às 08:47

    Bem explicativo! Aiwm amei! Parabéns
    Beijos!

    ResponderExcluir
  7. Anônimo24 de julho de 2013 às 14:12

    Super legal *-* Adorei ^-^
    Quero mudar o modelo do meu blog, porque a maioria das coisas legais só acontecem no modelo Travel :P To fazendo no blog teste e se ficar legal eu mudo o meu original :3 Mas vindo desse blog, vai ficar bem legal!!

    www.worldisanime.blogspot.com

    ResponderExcluir
  8. Gaby Misaki25 de julho de 2013 às 05:25

    Muito obrigada^^
    ~~Fico muito feliz por ter gostado^^

    ~~Kissus

    ResponderExcluir
  9. Aoki Kaai15 de agosto de 2013 às 13:18

    Olha alguem no ask me perguntou como fazia para por os gadgets assim então eu rebloguei a parte MAS COM CRÉDITOS!

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença!
Ambos são super importantes para mim.

Kaomojis:
(*´∀｀*) (*≧∀≦*) (=´∀｀)人(´∀｀=) ( ･ ▽ ･)
ヾ(*^▽^*)o, ｡･ﾟﾟ･(>_<)･ﾟﾟ･｡ (＞ω＜；)＊(´∀`)ﾉﾉ＊
（。ゝω・）～♡ ﾍ(´∀｀ﾍ)ﾍ (╯°□°）╯•ᴥ• (´･ω･`)