VGH: Jak dodać własne emotikony

Każdy z nas na pewno codziennie posługuje się emotikonami w trakcie pisania na forach, blogach, czatach. Na stronach założonych na vgh.pl pomimo dostępu do FTP, możemy zmienić emotki przy pomocy CSS. Małe, duże, zielone, czarne - jakie tylko chcemy. Na deviantart możemy znaleźć od groma różnych zestawów emotek, a ja wam pokaże jak je umieścić na stronie dzięki zastosowaniu CSS.

W poniższym kodzie posłużyłam się gotowymi emotkami o wymiarach 40x40px. Ikonki pobrałam z deviantart.com, tego autora: TUTAJ.

1. Utwórz lub edytuj istniejący panel (lewy lub prawy):

PA -> Zarządzanie stroną -> Zarządzanie panelami

2. Skopiuj i wklej w panel poniższy kod:

<style type="text/css">
/*----Emotikony--*/
/*----Modyfikacja przygotowana przez Fantagiro || fantidesign.blogspot.com--*/

/*----Emotka 1--*/
img[src*="smile.gif"] {
background-image: url(http://www.fotoload.pl/123aa60/4c549a4f6a8fe3c36b6c2d2c5c0f49967013.png);
overflow:hidden;
padding-top: 40px;
width: 40px;
height:0;
}

/*----Emotka 2--*/
img[src*="wink.gif"] {
background-image: url(http://www.fotoload.pl/123aa71/20ada41520b71e76ecac8bea8010053a5786.png);
overflow:hidden;
padding-top: 40px;
width: 40px;
height:0;
}

/*----Emotka 3--*/
img[src*="frown.gif"] {
background-image: url(http://www.fotoload.pl/123aa58/ea59ccf63e08496162392cb727df2de37032.png);
overflow:hidden;
padding-top: 40px;
width: 40px;
height:0;
}

/*----Emotka 4--*/
img[src*="sad.gif"] {
background-image: url(http://www.fotoload.pl/123aa49/94698f2e61c1a38aef2e09013e38876c14313.png);
overflow:hidden;
padding-top: 40px;
width: 40px;
height:0;
}

/*----Emotka 5--*/
img[src*="shock.gif"] {
background-image: url(http://www.fotoload.pl/123aa40/7c58444c15d5cb47b7433bd9344840e018828.png);
overflow:hidden;
padding-top: 40px;
width: 40px;
height:0;
}

/*----Emotka 6--*/
img[src*="pfft.gif"] {
background-image: url(http://www.fotoload.pl/123aa56/3548800e105b6ea792e2bd7a21b9987719773.png);
overflow:hidden;
padding-top: 40px;
width: 40px;
height:0;
}

/*----Emotka 7--*/
img[src*="cool.gif"] {
background-image: url(http://www.fotoload.pl/123aa47/ec2f7929f9ec3e37b72ebf7aa9fddeca15430.png);
overflow:hidden;
padding-top: 40px;
width: 40px;
height:0;
}

/*----Emotka 8--*/
img[src*="grin.gif"] {
background-image: url(http://www.fotoload.pl/123aa65/43d214ffb5ffdd4b39536408ffc9f15314319.png);
overflow:hidden;
padding-top: 40px;
width: 40px;
height:0;
}

/*----Emotka 9--*/
img[src*="angry.gif"] {
background-image: url(http://www.fotoload.pl/123aa63/00ac1628f06c820aa265395f89fa7e399677.png);
overflow:hidden;
padding-top: 40px;
width: 40px;
height:0;
}
</style>

Emotki na własne podmieniamy w miejscu: "background-image: url(...)".

3. Zapisz panel i pamiętaj aby go włączyć!

Ważne:

• wartości atrybutów padding-top i width musisz dostosować do wymiarów swoich własnych ikonek. Jeśli wykorzystasz ikonki mniejsze o wymiarach 20x20px to atrybuty przyjmą wartości:
  

  padding-top: 20px;
  width: 20px;

• wysokość, czyli height bezwarunkowo ma mieć zawsze wartość 0!!!