21 setembro 2013

Personalizar sidebar e áreas das postagens

http://weheartit.com/entry/77316261/via/Erica_Judd - OBS: Imagem colorida nem combinou com o lay do blog u.u kkk
Hey! Que tal mudar um pouco sua sidebar (Sidebar é a barra lateral, onde ficam os gadgets) e a área dos post? É legal para mudar um detalhe que faz toda a diferença!

Primeiro em que saber de que lado é a sua sidebar para personaliza-la

Sidebar direita

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
Sidebar esquerda
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {


Todos dos códigos para personalizar sua sidebar vão abaixo do código acima (lembrando que você tem que saber qual lado é sua sidebar, a esquerda ou a direita. Se for esquerda cole debaixo do código na sidebar esquerda e vice verso)
Você pode fazer várias coisas na sidebar, deixar colorida, deixar ou tirar fundo, colocar margem, deixar redondo...
Lembrando, você clica em MODELO, EDITAR HTML e escolhe qual sidebar que você quer personalizar. Se você nunca mexeu no HTML da sua sidebar deve esta mai ou menos assim: (Esta é a barra lateral direita)

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
  margin-left: $(content.padding);
  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;

Mudando fundo
Você pode fazer isto no designer do modelo ou 'manualmente'.

Mude isto:
 background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
Para colocar imagem:
 background: url (URL_DA_IMAGEM); repeat;
Se você quiser colocar uma cor, você coloca o código da cor. Para ver o código das cores clique aqui.

Exemplo:
background: #FFFFFF;
Este é com o fundo branco. Você muda pelo código da cor.

Quer tirar o fundo? Deixe assim:

 background: ;

Deixando redondo:
O blog Place Fame fez uma postagem indicando um site que fica bem mais fácil para saber onde deixar redondo. Site aqui.
Você vai escolher o numero que você quer o quanto fique redondo, depois cole abaixo do código da sidebar.

Exemplo:

-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;

Colocando borda:

Tem varias formas de borda (isto é, de personalizar).

Bordas de todos os lados:
border-top: 5px solid #FF1493;
border-bottom: 5px solid #FF1493;
border-left: 5px solid #FF1493;
border-right: 5px solid #FF1493;
Você muda o valor '5', quanto maior, mais grosso. O 'solid' é a forma, que é a reta. Os últimos números é a cor. Se você quiser a borda só em cima, coloque apenas o código que é referente a borda pra cima.


Deixando Gadgets separados com fundo - Place Fame

Vá até Design > Editar HTML, aperte ctrl + f e escreva  /* Widgets
Lá vai esta com um código parecido com este:

/* Widgets
----------------------------------------------- */
.sidebar .widget {
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0;
}
Apos esta ultima linha acrecente background-color: #COR_HTML; Vai ficar assim:

/* Widgets
----------------------------------------------- */
.sidebar .widget {
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0;
background-color: #COR_HTML;
}

Area das postagens

Basicamente é o mesmo tutorial. O que muda é que em vez de colocar abaixo dos códigos de sidebar, você vai colocar abaixo desde código, que é o da área das postagens.

.main-inner .column-center-outer {
Personalizem muitooo seus blogs! Querem alguma postagem ou tutorial? COMENTA!
Bezôôs,
Erica Lima

15 comentários:

  1. Nossa amei o tuto! E o seu blog também é muito lindo!
    Beijos...
    Apaixonada por Sonhos <== VISITE!

    ResponderExcluir
  2. Olá,amei o post! Continue com essa cratividade q vc tem,já estamos curtindo sua page, é mt linda espero q vc também retribua o carinho lá na nossa!
    Ah e já estamos com post novo..
    Seu cantinho é lindo!
    beijokas da bea
    biaalini.blogspot.com
    https://www.facebook.com/EstanteDaBeaa

    ResponderExcluir
  3. Amei o tutorial, super útil e fácil, fica lindo o resultado :)
    http://mundoda-rachel.blogspot.com.br/

    ResponderExcluir
  4. amei o tutorial, PORÉM, eu já terminei o meu layout, então vai ficar pra próxima *-* estou te seguindo o blog está mais lindo do que nunca haha. beijos <3

    http://oculos-de-coracao.blogspot.com.br // blog novo :)

    ResponderExcluir
  5. Seus tutoriais são ótimos! O blog está muito lindo aliás.
    http://fashionistaapaixonada.blogspot.com.br/

    ResponderExcluir
  6. Oi, vi teu blog lá no #FF da Hey! Nanny e resolvi seguir *-*
    Adorei as dicas e logo menos as usarei no meu blog porque ele tá precisando, rs.
    Seu blog é lindo, parabéns *-*

    Sou autora do Faces para o sol http://oficialfacesparaosol.blogspot.com.br/ e do Lamentos de uma lunática http://facesparaosol.blogspot.com.br/ .
    Dá um passada lá se puder >< Beijão<3

    ResponderExcluir
  7. Adorei o post, belas dicas!
    Lindo aqui!
    Da uma passadinha no meu blog?
    Segue se gostar?
    http://theworldoflena.blogspot.com.br/

    ResponderExcluir
  8. Ai confesso que acho um pouco estranho mais seu blog e postagens são muito legais e adorei tudo, você já avia postado no meu blog antigo e agradeço muito só que devido a algumas coisas abandonei ele e agora estou com esse aqui entre lá não vai de arrepender

    ResponderExcluir
  9. Olá. Gostaria de te convidar para seguir meu bloguinho. Estou começando agora. Bjs
    http://blogdegarotasmimadas.blogspot.com.br/

    ResponderExcluir
  10. Amei o seu blog, ganhou uma nova seguidora.
    http://alohalour.blogspot.com/

    ResponderExcluir
  11. Obrigada pelo tuto, me ajudou muito. Graças a ele personalizei minha sidebar. Obg
    http://mythings2.blogspot.com.br/

    ResponderExcluir
  12. nossa muito obrigada me ajudou muitooooo !!!

    ResponderExcluir

Muito obrigada pelo comentário leitor, ele é muito importante *---*