VGH: Jak dodać graficzne rangi w Forum

Z tego co pamiętam na forum w.org przewijało się od groma pytań czy istnieje możliwość dodania graficznych rang. Na każdym forum takie rangi to prawie podstawa. Brak dostępu do FTP na vgh.pl, już na wstępie eliminuje te strony, aby w ich forach pojawiła się tak możliwość. Czy do końca? Nie. Dzięki zastosowaniu CSS można ręcznie wprowadzić taką opcję, aby z rang w postaci słów zmienić ja na kolorowe grafiki. Stosując mój poradnik można uzyskać efekt jaki widać na obrazku obok.

1. Utwórz lub edytuj już istniejący panel (lewy lub prawy):
PA -> Zarządzanie stroną -> Zarządzanie panelami
2. Skopiuj i wklej poniższy kod:

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

/*-------------Ranga admina---------*/
td[rowspan="3"] a[href="../profile.php?lookup=1"]{
background-image: url(http://www.fotoload.pl/123aa55/b18ed075640e597556cab821ac1f8be316904.png)!important;
background-repeat:no-repeat;
background-position: top center;
display:inline-table ;
width:145px;
padding-top:30px;
}

/*-------------Ranga domyślna dla wszystkich użytkowników---------*/
td[rowspan="3"] a[href*="../profile.php?lookup"]{
background-image: url(http://www.fotoload.pl/123aa67/a07038085150aa64cc97144649fc449d11169.png);
background-repeat:no-repeat;
background-position: top center;
display:inline-table ;
width:145px;
padding-top:30px;
}

/*-------------Usunięcie napisu rangi---------*/
td [rowspan="3"] span:nth-child(3){
font-size:0px;
}
</style>

Użyte w przykładzie obrazki podmieniamy na swoje w miejscach: "background-imag:".

Aby dodać rangę moderatorowi, newsmanowi itp to powielamy tą część kodu która opatrzona jest napisem "Ranga admina". Należy zmienić obrazek i dodać adres profilu moderatora lub newsmana.
W miejscu: 

profile.php?lookup=1 

kod należy podmienić na nowy adres profilu. Aby zdobyć adres profilu można wejść na profil tej osoby, będzie on widoczny w pasku przeglądarki lub w "Lista użytkowników" (zaznacz nick i kliknij w prawy przycisk myszy -> "Źródło strony"). 

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

Na początek możesz skorzystać z poniższych rang:


Dodatkowe uwagi:
- w kodzie wykorzystałam grafiki o wysokości 30px, dlatego na taką wartość został ustawiony atrybut padding-top
- szerokość grafiki to 140px, jednak aby całość wyglądała dobrze to dodałam 5px, przez co w kodzie wartość atrybutu width wynosi 145px.