Background nos marcadores

Hoooý Hoje Trago Um Tutorial Que Aprendi No Go Imagines é De Como Colocar Background Nos Marcadores Vamos ver?

Exemplo:

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 e O Go Imagines 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 }

Visualise Se Tiver Tudo Certo Salve!