1 de out de 2012

Como separar os gadgets

Found here

Ooi gente! Recebi esses dias, se não me engano, um pedido desse tutorial para separar os gadgets do blog, e como eu não encontrei ele em nenhum blog (não lembro de onde peguei) peguei no meu HTML mesmo, então se eu tiver pego do seu blog, me avise. Procurei até no google algum tutorial assim, mas nenhum era como é o meu.

Enfim, vamos ao tutorial:

Vá no seu HTML, procure por /* Widgets e você achará algo mais ou menos assim:

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

Antes de fechar a chave, cole: background: #FFFFFF; 
Esse é o código do fundo, você pode trocar #FFFFFF por outra cor, use essa tabela para ver códigos de cores.

Se você quiser deixar a borda dos gadgets arredondada, além do código fornecido, cole antes de fechar as chaves:
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

Visualize, e se estiver tudo certinho, salve.

Agora você deve ter percebido que os seus gadgets estão com um fundo atrás, certo? Então agora vamos eliminar esse fundo.

Procure por:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner { (se sua sidebar for direita)
ou
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner { (se sua sidebar for esquerda)

E você achará algo parecido com isso:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
  margin-left: $(content.padding);
  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}
Agora substitua a área sublinhada:

$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;

Por transparent;
(não esqueça do ponto e vírgula)

Visualize, e se estiver transparente, e os gadgets bonitinhos da cor que você colocou, salve.

Espero ter ajudado, qualquer dúvida, podem perguntar que eu tentarei te ajudar conforme eu puder.

Se usarem esse tutorial, creditem o blog, e se quiserem, podem repassar. hoje estou boazinha

Beijos!

18 comentários:

  1. Esse tutorial é muitooo legal!

    http://manguitarosa.blogspot.com.br/

    beijoos

    ResponderExcluir
  2. Amei, mas como meu fundo é branco, não faria tanta diferença...

    Historia Agridoce - Você conhece The Wanted?



     

    ResponderExcluir
  3. Separei os gadgets do meu blog há um tempo, e foi uma escolha muito boa. Recomendo a todos!
    victory-blog1.blogspot.com.br

    ResponderExcluir
  4. Muito fera esse tutorial :3 O novo layout daqui está tão lindo *OOOO* Eu realmente faço de outro jeito, não sabia da sua forma, amei, sempre arrasando aueuhaueh *-*
    Garota do Olhar Sincero - Click :3

    ResponderExcluir
  5. Já conhecia esse tutorial, o blog fica bem melhor com os gadjets separados estou te seguindo flor.
    visite o blog pelo peril

    ResponderExcluir
  6. Aiii obg pelo tutu!
    Adorei, beijinhos.

    coffemilia.blogspot.com
    sweettmustache.blgospot.com

    ResponderExcluir
  7. eu estou procurando o codigo, e aparece no htm, mais nao acho o codigo '' parecido '' abaixo :( será qe er o modelo do meu blog?

    ResponderExcluir
  8. VALEEEEEEEEEEEEEU, DEVO OS MEUS DIAS E DIAS DE PESQUIZA POR ESSE TUTORIAL A VCS ^^

    ResponderExcluir
  9. Salvou minha vida *u*

    http://utauloid-project.blogspot.com.br/

    ResponderExcluir
  10. Você acaba de salvar o designer no meu blog!!!! Cara amei!!!! Ando procurando por esse tutorial já faz tempoooooo! Gente to mto feliz... very very very happy!

    ResponderExcluir
  11. Fiz tudo como orientado mas não deu certo. Pode me ajudar?
    http://www.leiasempre.com/

    ResponderExcluir
  12. Eu já tinha separado , mais onde eu fiu , não tinha explicado como tirar essa parte transparente de trás !!

    Agr eu conseguiii tirar !Mto Obg :D

    ResponderExcluir
  13. É mais fácil do que eu imaginava, eu fiz o tuto e deu tudo certinho, só que o primeiro gadget não ficou alinhado com a barra de postagem, ficou um pouco mais pra baixo, o que eu faço?

    neverbeenspoken.blogspot.com.br

    ResponderExcluir
  14. Tem como aumentar o fundo branco que fica atras?

    ResponderExcluir
  15. Deu bem certo comigo, só que eu fiz um alteração. Eu coloquei com um padding, assim fica maior o fundo. Obrigada :3

    etcforme.blogspot.com

    ResponderExcluir
  16. Puxa amei o tutu ! Vlw mesmo !
    http://no-smileteste.blogspot.com.br/ (Blog ainda esta em reforma)

    ResponderExcluir
  17. Esse tuto é ótimo tem me ajudado muito, Obrigada :)
    http://filhadoreilarisse.blogspot.com.br/

    ResponderExcluir

Obrigada por ler e comentar!
Deixe o link do seu blog (ou seu perfil aberto) para que eu possa retribuir. Não gosto muito de responder dúvidas via comentários, então prefiro que você mande na ask ali ao lado ->
Comentários de divulgação sem nada sobre o post não serão retribuidos. Fale pelo menos um pouquinho sobre o post, por favor.
Faça aos outros aquilo que você quer que façam para você.