VGH: Modyfikacja grup użytkownika

Grupy to bardzo przydatna rzecz, choć z tego co zauważyłam to na stronach vgh praktycznie nie używana. W poradniku przedstawię wam jak z nie zachęcająco wyglądających grup użytkownika, które są wyświetlane w profilu, przekształcić je w coś - raz ciekawego, a dwa użytecznego. Wśród ciekawych zastosowań grup na stron mogę m.in podać: strona piłkarska - admin może stworzyć grupy poświęcone klubom piłkarskim, a w postaci ikon umieścić ich herby. Dzięki takiemu zastosowaniu, użytkownicy będą przyporządkowani do swojej ulubionej drużyny. Strona klanowa - admin może stworzyć grupy przedstawiające poziom danego użytkownika. Grupy mogą przedstawiać członków administracji, userów zbanowanych, użytkowników wyróżnionych itd...

W przykładzie posłużyłam się ikonką o rozmiarach 50x50px i kod odnosi się do pierwszej utworzonej grupy.

1. Dodaj grupę (jeśli już je posiadasz to pomiń ten punkt):
PA -> Zarządzanie użytkownikami -> Grupy użytkowników

Aby do utworzonej grupy dodać użytkowników to musisz zedytować grupę wybierając jej nazwę z rozwijanej listy, a następnie kliknąć w "Edytuj". Przenieś nicki wybranych użytkowników do grupy.

2. Dodaj nowy lub edytuj istniejący panel:
PA -> Zarządzanie stroną -> Zarządzanie panelami

3. Skopiuj i wklej kod (część kodu związana ze stylizacją odnosi się do wszystkich grup):

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

/*----ikona wybranej grupy----*/

.tbl1 a[href="profile.php?group_id=1"] {
background-image: url(http://www.fotoload.pl/123aa58/2a857a81ee58bd83a850b94fc99dbdec1784.gif);
}

/*----stylizacja wszystkich grup a i a:hover----*/
.tbl1 a[href*="profile.php?group_id"] {
font-size:0px;
display:inline-table ;
width:50px!important;
height:50px!important;
background-color:#fff!important;
border:1px solid #003300 ;
background-position:center center;
background-repeat:no-repeat;
vertical-align:bottom!important;
margin:3px;
}

.tbl1 a:hover[href*="profile.php?group_id"] {
font-size:0px;
display:inline-table ;
width:50px!important;
height:50px!important;
background-color:#CCFF99!important;
border:1px solid #000;
background-position:center center;
background-repeat:no-repeat;
vertical-align:bottom!important;
margin:3px;
}
</style>

4. Powyższy kod należy uzupełnić o id grupy (numer grupy) oraz grafikę grupy.
Tak będzie wyglądał adres grupy, która została utworzona jako pierwsza:

profile.php?group_id=1

Aby zdobyć id grupy należy wejść w: PA -> Zarządzanie użytkownikami -> Grupy użytkowników.
W rozwijanej liście, obok nazwy znajduje się ona w kwadratowym nawiasie po lewej stronie:

Obrazek grupy należy podmienić w: "background-image:".

5. Zapisz panel i pamiętaj aby był włączony.

6*. Aby zmodyfikować kolejne grupy to oczywiście powielamy ten fragment kodu wraz ze zmienionym numerem grupy id:

/*----ikona wybranej grupy----*/
.tbl1 a[href="profile.php?group_id=1"] {
background-image: url(http://www.fotoload.pl/123aa58/2a857a81ee58bd83a850b94fc99dbdec1784.gif);
}