VGH: Jak dodać avatary w shoutboxie i komentarzach

Z powodu brak dostępu FTP na vgh.pl to normalnie w plikach php nie możemy wprowadzić takich zmian, aby przy nickach w shoutboxie i komentarzach pojawiły się avatary użytkowników. Aby obejść tą niedogodność można zastosować CSS.

Niestety metoda ma dużą wadę. Jeśli strona posiada dużo userów, to dodawanie avka każdemu użytkownikowi może powodować duże niedogodności. Dodawanie tych avatarów może nie powodować w nas czerwonej gorączki, jeśli witryna skupia małą grupkę userów.


1. Utwórz lub edytuj istniejący panel (lewy lub prawy):
PA -> Zarządzanie stronę -> Zarządzanie panelami

2. Usuwanie bulleta:
Najpierw usuniemy małą ikonkę, która pojawia się przed nickiem, gdzie w zależności od stylu jest ona w postaci kropki, kwadraciku, strzałki itp:

/*-----Usuwanie ikonki bullet------*/
.shoutboxname img[src*="bullet.gif"] {
display:none;
visibility:hidden;
width:0px!important;
height:0px!important;
}

3. Domyślny avatar dla wszystkich użytkowników:
Aby jednocześnie wszystkim wyświetlił się taki sam avek, to potrzebujemy, jak w przykładzie ikonki 16x16px. Polecam wykorzystać w tym celu favicon strony.
W miejscu: "background-image: url (...)" - należy podmienić adres ikonki.

/*-----Avatar domyślny dla wszystkich------*/
.shoutboxname a[href*="profile.php?lookup"], .comment-name a[href*="profile.php?lookup"] {
display:inline-table ;
padding-left:18px;
background-image: url(http://www.favicon.co.uk/ico/3862.png);
background-repeat:no-repeat;
background-position:center left;
width:16px!important;
height:16px!important;
}

Uwaga: w powyższym kodzie atrybut padding-left ma wartość 18 px. Ponieważ została wykorzystana ikonka o rozmiarach 16x16, więc aby ikona nie stykała się z nickiem zostały dodane dodatkowe 2px. Np. jeśli wykorzystasz ikonki o rozmiarach 20x20 to wartość padding ustaw na minimum 22px.

4. Avatar konkretnego użytkownika:
Aby zmienić avek konkretnemu użytkownikowi to potrzebujemy adres profilu użytkownika. Aby go zdobyć np. można zaznaczyć nick użytkownika i wejść w źródło strony lub wejść na profil użytkownika i w pasku adresu w przeglądarce możemy go zobaczyć.
Dla założyciela strony adres będzie wyglądał tak:profile.php?lookup=1

/*-----Avatar użytkownika------*/
.shoutboxname a[href="profile.php?lookup=1"], .shoutboxname a[href="../profile.php?lookup=1"], .shoutboxname a[href="../../profile.php?lookup=1"], .comment-name a[href="profile.php?lookup=1"], .comment-name a[href="../../profile.php?lookup=1"]{
display:inline-table ;
padding-left:18px;
background-image: url(http://www.favicon.co.uk/ico/2.png)!important;
background-repeat:no-repeat;
background-position:center left;
width:16px!important;
height:16px!important;
}

5. Wszystkie powyższe trzy kody umieszczamy w tagach style i końcowo powinien on wyglądać tak:

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

/*-----Usuwanie ikonki bullet------*/
.shoutboxname img[src*="bullet.gif"] {
display:none;
visibility:hidden;
width:0px!important;
height:0px!important;
}

/*-----Avatar domyślny dla wszystkich------*/
.shoutboxname a[href*="profile.php?lookup"], .comment-name a[href*="profile.php?lookup"] {
display:inline-table ;
padding-left:18px;
background-image: url(http://www.favicon.co.uk/ico/3862.png);
background-repeat:no-repeat;
background-position:center left;
width:16px!important;
height:16px!important;
}

/*-----Avatar użytkownika------*/
.shoutboxname a[href="profile.php?lookup=1"], .shoutboxname a[href="../profile.php?lookup=1"], .shoutboxname a[href="../../profile.php?lookup=1"], .comment-name a[href="profile.php?lookup=1"], .comment-name a[href="../../profile.php?lookup=1"]{
display:inline-table ;
padding-left:18px;
background-image: url(http://www.favicon.co.uk/ico/2.png)!important;
background-repeat:no-repeat;
background-position:center left;
width:16px!important;
height:16px!important;
}
</style>

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

Dwie favicony wykorzystane w przykładzie pobrałam z tej strony tutaj.