21 de agosto de 2013

tutorial-faixinhas numeradas nos gadgets

Oii fofuras,hoje   venho ensinar á vocês, de como colocar essas faixinhas numeradas no titulo da gadget de vocês ! É bem fácil, mais um pouco complicado, então você tem que prestar bem atenção, para poder fazer bem certinho ! 


                                                                          vamos lá? :3


que você tem que fazer um ribbon (faixa) para cada gadget. Vá no teu HTML eprocure pelo título do seu gadget. Por exemplo, o gadget de "Home", o meu está assim:

<b:widget id='Image1' locked='false' title='Home' type='Image'/>

A parte em negrito é a ID e em itálico é o que você achou ao procurar o título do seu gadget. Copie o ID e agora procure por ]]></b:skin> e logo acima você vai colar esse código:





#IDdoGADGET h2 { background: url('LINK DA FAIXA') no-repeat; color: transparent; width: 310px; height: 75px; margin-top: -30px; margin-left: -35px; float:left; }








Aonde está em negrito você vai trocar pela ID do gadget, e em itálico, é a URL do ribbon, você tem que repetir esse tutorial diversas vezes para aplicar em todos, colocando ID's e imagens diferentes (avá)
Mas calma, o tutorial ainda não acabou. Agora você deve procurar por .sidebar .widget { e dependendo do seu HTML, deve estar mais ou menos assim:









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




 Apague esse código por completo e coloque esse no lugar:








.sidebar .widget {background: #fff;padding-left: 10px;padding-bottom: 10px;padding-right:10px;padding-top: 5px;margin: 30px 0; }










espero que tenham gostado.Beiijo!

Nenhum comentário:

Postar um comentário