27 abril 2014

Posted at  12:00  |  in  

Background nos marcadores



Saibam que existe duas formas de fazer: Com uma imagem inteira (mais difícil) e com uma imagem no topo e corno restante do gadget (mais fácil). Entenda:


Como disse, o segundo jeito é mais fácil (com imagem e cor) do que o primeiro (com imagem inteira). Sabe porque? O primeiro você vai ter que fazer a imagem com uma altura que seja suficiente para caber todas as suas tags, e pra achar essa altura pode ser um pouco complicado. Lembre-se também que, ao colocar fundo com esse método, você não vai poder ficar adicionando mais tags, caso contrário elas começarão a sair pra fora da imagem. O segundo é melhor pois é mais simples e a caixinha com cor vai aumentando conforme você for adicionando mais tags, ou seja, não requer manutenção.

É importante que você esteja usando o gadget de marcadores em Cloud (tags misturadas, como a minha)
Antes de começar o tuto, quero creditar o Trechy Teen pelo tutorial!

Com imagem no topo e cor
Entre no seu HTML e procure (CTRL + F ou F3) por: /* Main 
após encontrar, cole o seguinte código acima dele: 
/* Fundo nos marcadores --------------------------------------------- */
#Label1 {
font-size: 13px;  /*Tamanho da fonte do texto do gadget*/ 
line-height: 12px;
margin-left: 0px;
background: #ffffff url('url da imagem') no-repeat left top; /*Cor e imagem de fundo*/
}
#Label1 .widget-content {
padding: 50px 10px 10px 10px;  /*Espaçamento*/  
margin: 0;
color: #696969;  /* Cor da fonte */  
}
OBS: #fff se refere a cor da caixinha do gadget, enquanto a url se refere a imagem do topo.
Quando for fazer a imagem leve em consideração a largura da sua sidebar!

Bases:
Na cor do background (do lado da url) coloque: #FFCACA
Na cor do background (do lado da url) coloque: #FFF
E uma pronta:
Na cor do background (do lado da url) coloque: #FFF

Com imagem inteira
Entre no seu HTML e procure (CTRL + F ou F3) por: /* Main 
após encontrar, cole o seguinte código acima dele:
/* Fundo nos marcadores --------------------------------------------- */
#Label1 {
font-size: 13px; /*Tamanho da fonte do texto do gadget*/
background: url('url da imagem') no-repeat; /*Imagem de fundo*/
height: 270px; /*Altura da imagem*/
}
#Label1 .widget-content {
padding: 20px 10px 5px 10px;  /*Espaçamento*/
margin: 0;
color: #696969;  /* Cor da fonte */
}
Não fiz imagens pra esse método, uma vez que não tenho como saber o tamanho ideal (altura) pro gadget de vocês. A dica é tirar print de seus marcadores e descobrir a altura do mesmo, pra saber a largura é só levar em consideração a largura da sua sidebar!
Não achou /* MainProcure por #sidebar-wrapper { e cole o código escolhido antes de fechar }

http://goimagines.blogspot.com.br/2012/07/background-nos-marcadores.html 

Share this post

About Naveed Iqbal

Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim venenatis fermentum mollis. Duis vulputate elit in elit. Follow him on Google+.

0 comentários:

About-Privacy Policy-Contact us
Copyright © 2013 Testes para Blogs. Blogger Template by Bloggertheme9
Published..Blogger Templates. Powered by Blogger.
back to top