Personalizar cada gadget da sidebar

Yo estou atualizando esta postagem por perceber que praticamente ninguém consegue executa-la é percebi que minha explicação fico muito vaga, então farei mais detalhada espero que consigam entender agora, peço desculpas pelas complicações. Nesta postagem vou mostrar como personalizar cada gadget da sidebar o deixando colorido ou com formas diferentes.A postagem ficar um pouco grande mas detalhadamente. Vamos lá.

1. Para começar o efeito não vai funcionar se você já tiver códigos de sidebar dentro de seu HTML então terá que deixar tudo transparente e adicionar uma por uma. Para isso vá ate Modelo>> Personalizar>> Avançado>> Plano de fundo da barra lateral. Ao lado terá duas caixinhas então remova a cor deixando transparente. Salve e vá ate seu HTML. 

Então procure por /* Widgets ou por .sidebar .widget { esse padrão é para o modelo travel. Mas fiz teste em outros modelos é funcionou mas procure só por  /* Widgets se seu modelo já possui a sidebar transparente pule essa etapa e vá para a 2:

Abaixo do código procurado você vai achar algo similar a isso:

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

Apague toda área marcada em azul então salve.

2. Agora escolha um gadgets e aperte Ctrl+F e procure pelo nome dele. Exemplo o meu tá escrito *Elite* então procurei por esse nome pelo nome e você faz o mesmo.

Agora ira aparecer o código do gadget que você procuro mais ou menos assim:

Códigos

<b:widget id='HTML1' locked='false' title='*Elite*' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>

A onde esta em vermelho é onde fica o ID do gadget dele sempre fica antes do nome, nesse caso pegue o ID e guarde porque é dele que vamos precisar. Agora procure por ]]></b:skin> e depois dele cole esse código:

Códigos

    #ID-GADGET {
    background: #fff; /*Cor de fundo do gadget*/
    }
    #ID-GADGET h2 {
    /*Estilos para o título do gadget*/
    Font-family: Verdana;
    color: #000;
    font-size: 14px;
    }

Agora só substituir onde tá ID-GADGET pelo ID que você pego antes. Exemplo:

    #HTML1 {
    background: #fff; /*Cor de fundo do gadget*/
    }
    #HTML1 h2 {
    /*Estilos para o título do gadget*/
    Font-family: Verdana;
    color: #000;
    font-size: 14px;
    }

Nunca apague o h2 é ele que diferencia o fundo para o titulo do gadget. Agora é só arrumar como desejar a primeira parte é o fundo do gadget coloque sombra bordas o que desejar já a segunda parte é o título do gadget. O código é apenas uma base para vocês editarem como desejarem. Espero que agora consigam fazer. Fiz o teste é funciono direitinho Kiss.