4.Criando Seu Próprio Modelo Para Sidebar

Bom dia meus amores,
Estranho, acho que nunca dei bom dia ou algo do tipo aqui mas ok.Hoje eu trouxe um tutorial bem simples e que acho que vai ajudar muito todos vocês.Pelo menos quando descobri ajudou tipo; muito.

Modelo para sidebar, é com toda certeza uma das partes mais importantes e mais chatinhas de um bom layout.
Vamos aprender a criar esses modelos, em tamanhos proporcionais, pois é muito difícil achar um layout onde o conteúdo do gadget está perfeitamente alinhado.Vou ensinar a vocês fazerem um modelos mas nisso vocês podem acrescentar faixinhas, bordas abaixo do título e tudo o que quiserem.
Vamos ao tuto?

- Procure por .sodebar . widget { você vai achar como:
.sidebar .widget {
  border-bottom: 2px solid $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0;
}
- Apague e cole tudo que necessitar ao restante do tutorial.
- O corpo da sidebar: eu acho na maioria das vezes feio uma sidebar arredondada, mas isso é de sua opção.
.sidebar .widget {
 padding-bottom: 10px; /* Não mude nada aqui*/
  padding-left: 5px; /* Não mude nada aqui*/
  padding-right: 5px; /* Não mude nada aqui*/
  margin: 8px 0; /* Não mude nada aqui*/
  background: #fff; /* Cor de fundo */
  margin-top: 1px; /* Não mude nada aqui*/
font-family: Arial; /* Fonte do texto*/
font-size: 8px; /* Tamanho da fonte */
Você pode acrescentar:
border-radius: 2px 2px 2px 2px; /* Deixa as bordas arredondadas*/
 border: 1px solid #ecebeb; /* bordas */
box-shadow: inset 0 0 5px #cfc8d7, 0px 0px 2px #ededed; /* Brilho no interior */ 
box-shadow:  0 0 5px #cfc8d7, 0px 0px 2px #ededed; / * Brilho nas bordas */
- Agora vamos ao título:
.sidebar h2 {
margin-left: 20px;
margin-top: -10px;
margin-bottom: 5px;
text-align: center; /* Alinhamento do texto */
font-family: Arial; /*Fonte da letra*/
color: #000; /*Cor da fonte*/
font-size: 20px; /*Tamanho da fonte*/
}
- Você também pode acrescentar:
border-bottom: dotted 1px #ecebeb; /*Borda abaixo do título*/
background: #color; /*faxinha de cor*/
background: url ('URL DA FAIXINHA'); /*Com faixinha*/
É isso amores, espero que tenham entendido :) e gostado do tuto.
Beijinhos!
Fiquem com Deus!


3 comentários:

  1. Não sei porque, mas adoro personalizar a sidebar *u* Gostei muito do tuto, o resultado deve ficar demais :3

    htmlandresources.blogspot.com

    ResponderExcluir
  2. Awn que bom esse tutorial <33
    http://miss-nothing-oficial.blogspot.com.br/

    ResponderExcluir
  3. Adorei o tutorial! Sem dúvida alguma que eu tenho de usá-lo. É muito útil
    querosabertudo-k.blogspot.com

    ResponderExcluir

Por favor leia as regras antes de comentar:

- Sem spam!
- Sempre que puder deixe o link do seu blog, assim posso retribuir a visita.
- Não aceito "Segue de volta?", eu só sigo se gostar do blog.
- Vou responder como você perguntar, se insultar eu vou retribuir.
- Aceito críticas construtivas, opiniões desnecessárias serão recebidas como devem.
Leu tudinho?Então deixe seu comentário =]