Avatar zamiast zwykłych ikonek - widok na liście tematów

[TRACKER]

Witam, chciałbym przedstawić znany (choć tak naprawdę nigdy jeszcze nie opisywany [chyba?]) sposób minimalnej edycji wyglądu naszego skina Chodzi tu dokładniej o zamienienie standardowych ikonek (z tzw. legendy ;p) w widoku forów a dokładniej na liście tematów w danych forach...

Dla tych, którzy nie rozumieją za bardzo moich słów służę obrazkiem poglądowym :

Aby uzyskać niniejszy efekt należy przejść do ACP > Wygląd > NazwaTwojegoSkina > (wybrać z rozwijanej listy) Zarządzaj szablonami i CSSem i znaleźć w: Szablony -> Widok forum -> forumIndexTemplate poniższy fragment kodu:

<td class='short altrow'>{parse replacement="{$data['folder_img']}"}</td>

A następnie zamienić go na:

<td class='short altrow'><div class='t_avatar <if test="$data['go_new_post'] === false">no-new</if>'><img src="<div class='t_avatar <if test="$data['go_new_post'] === false">no-new</if>'><img src="http://forum.invisionize.pl/public/style_images/master/t_avatar.png" alt="" class='frame' /><span>{IPSMember::buildAvatar($data['starter_id'])}</span></div></td>

Oczywiście wszelkie zmiany w bicie należy zapisać.

Kolejny krokiem jest dodanie poniższego kodu do Twojego CSS'a, dokładniej do ipb_styles.css

.t_avatar{
 width: 39px;
 height: 39px;
 overflow: hidden;
 position: relative;
 background: url("http://forum.invisionize.pl/public/style_images/master/t_avatar.png") no-repeat 1px 0px;
}

.t_avatar.no-new{
 opacity: 0.4;
 filter: alpha(opacity=40);

}

.t_avatar img.frame{
 position: absolute;
 top: 0;
 left: 0;
 z-index: 100;

}

.t_avatar span{
 display: block;
 width: 37px;
 height: 37px;
 position: absolute;
 top: 0px;
 left: 1px;
 overflow: hidden;
 z-index: 99;
}

.t_avatar span img{
 width: 37px;
 height: 37px;
} 

To prawie wszystko, wystarczy jeszcze tylko ten pliczek zapisać jako t_avatar.png do katalogu na FTP tj. do: public/style_images/nazwaTwojegoSkina/

Miłego użytkowania

Pozdrawiam, Robert

PS. Można też zmienić inne miejsca gdzie występują standardowe ikony z legendy na avatary, wystarczy tylko troszkę samemu pomyśleć

Edytowane 16 Listopada 2010 przez TRACKER

[Amfidiusz]

Super poradnik! Zawsze mi się ten efekt podobał

Jedno małe ale... forów.pl

[TRACKER]

Zaraportowałem wątek, bo myślę że lepszą nazwą byłoby: Avatar zamiast zwykłych ikonek na liście tematów czy jakoś tak... widzę, że efekt się podoba - miło... troszkę zabawy w CSS było i dochodzenia co i jak oraz gdzie ;p

[TRACKER]

Zauważyłem że coś tutaj u Was szwankuje, bo zamiast {style_images_url}/ wyświetla się: http://forum.invisionize.pl/public/style_images/master/ pamiętajcie, że w linijce:

background: url("http://forum.invisionize.pl/public/style_images/master/t_avatar.png") no-repeat 1px 0px;

ma być: { style_images_url }/ (bez spacji między nawiasami ;p)

[TRACKER]

Skoro DawPi pozwolił w shoutboxie, że mogę sobie walnąć 3 posta z rzędu to też tak robię...

Posiadasz modyfikację DawPi'ego Similar Topics? Jeśli tak, możesz również tam ikonki zamienić na avatary, wystarczy, że wyszukasz frazę (korzystając z wyszukiwarki w skinach - po lewej) <td class='short altrow'> i z listy wyników otworzysz: folder skin_topic -> hookdp3similarTopics a następnie znajdziesz fragment:

<td class='short altrow'>
						{parse replacement="{$data['folder_img']}"}
					</td>

i zamienisz go na:

<td class='short altrow'><div class='t_avatar <if test="$data['go_new_post'] === false">no-new</if>'><img src="<div class='t_avatar <if test="$data['go_new_post'] === false">no-new</if>'><img src="{style_images_url}/t_avatar.png" alt="" class='frame' /><span>{IPSMember::buildAvatar($data['starter_id'])}</span></div></td>

Yo!

[groverr]

Sry że odświeżam stary temat , ale mi nie zmniejsza avatara Tzn mam swój własny avatar o wymiarach 150X150 i takiego rozmiaru pokazuje na forum w tematach

[LukaszM]

Wszystko ładnie pięknie tylko takie coś mi wyskakuje ;/

[TRACKER]

Arthas, wszystko ładnie pięknie, ale wyszukujesz i zamieniasz odpowiedni fragment? Ja na chyba 3-4 skinach tą modyfikację stosowałem i wszędzie jest ok Co do tych niewczytanych obrazków, to... wgraj jakiś biały obrazek o nazwie t_avatar.png lub skopiuj (mało widoczny, ale jednak) obrazek i będzie git. Tak to jest jak się ma stara przeglądarkę ;p

groverr, jak to? Modyfikacja ta podana - zmniejsza tylko i wyłącznie avki w miejscu tym gdzie są ikonki postów...

Czytamy i myślimy drodzy państwo! Helloł!

[LukaszM]

Zapisałem ładnie Twój obrazek na swoim ftp i wczytuje się z tego url bez problemu Helloł

http://lublinforum.com/public/style_images/mgcrystals/t_avatar.png

Jakiś inny pomysł na naprawę?

[DawPi]

Sry że odświeżam stary temat , ale mi nie zmniejsza avatara Tzn mam swój własny avatar o wymiarach 150X150 i takiego rozmiaru pokazuje na forum w tematach

I to źle działa? Skoro ktoś wrzucił avka 150x150 to takiego wyświetla.

[TRACKER]

Zapisałem ładnie Twój obrazek na swoim ftp i wczytuje się z tego url bez problemu Helloł

http://lublinforum.com/public/style_images/mgcrystals/t_avatar.png

Jakiś inny pomysł na naprawę?

Zmień przeglądarkę, u mnie wszystko na Twoim forum jest ok - korzystam z Firefox'a 4. Tak to jest jak się IE używa :-)

[groverr]

I to źle działa? Skoro ktoś wrzucił avka 150x150 to takiego wyświetla.

A jak zrobić żeby zmniejszało , że jak ktoś da takiego avka to żeby zmniejszyło ..

[DawPi]

Nie ma opcji, o ile oczywiście nie zmienisz tych wymiarów globalnie w ACP dla wszystkich użytkowników.