Background nos marcadores

Hello imaginers! Depois de tantos pedidos sobre como colocar fundo nos marcadores, cá estou eu pra ensinar. Pra quem não sabe do que estou falando, segue o meu gadget de macadores:

Saibam que existe duas formas de fazer: Com uma imagem inteira (mais difícil) e com uma imagem no topo e cor no 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: O #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 /* Main? Procure por #sidebar-wrapper { e cole o código escolhido antes de fechar }

Visualize e se curtir salve, caso não goste é só limpar as alterações feitas! É isso babies, espero que tenham gostado do tuto :*