Aprendendo a Editar um Layout: Parte 2

by - 20.7.13




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.

You May Also Like

15 Comentários

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

    ResponderExcluir
    Respostas
    1. Muito obrigada, fico feliz por ter te ajudado^^
      ~~Kissus

      Excluir
  2. Ta ficado muiito legal
    Ta me ajudando pra caramba muito obg
    Bjjss

    ResponderExcluir
    Respostas
    1. Fico super feliz por isso^^
      Muito obrigada*---*

      ~~Kissus

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

    ResponderExcluir
    Respostas
    1. Fico feliz que esteja te ajudando^^
      ~~Kissus

      Excluir
  4. Bem explicativo! Aiwm amei! Parabéns
    Beijos!

    ResponderExcluir
  5. 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
  6. Muito obrigada^^
    ~~Fico muito feliz por ter gostado^^

    ~~Kissus

    ResponderExcluir
  7. 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, 。・゚゚・(>_<)・゚゚・。 (>ω<;)*(´∀`)ノノ*
(。ゝω・)~♡ ヘ(´∀`ヘ)ヘ (╯°□°)╯•ᴥ• (´・ω・`)