Forum icons czyli różne ikonki działów

Dzięki temu będziemy mogli przypisać naszym konkretnym działom własne ikonki. Działa tutaj także opcja oznaczania działów (zawiera nowe posty/nie zawiera nowych postów).

1 Przygotowanie pliku z ikonami

Na początek przygotuj sobie ikonki. Wszystkie ikonki umieszczamy w jednym pliku (najbardziej optymalna wersja). Plik powinien wyglądać mniej więcej tak:

   

Edytuj szablon Style i szablony -> szablony -> <twój styl> -> opis działu -> forumbit_depth2_forum

Znajdź

<span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span> 


i zamień na

<span class="forum_status forum_{$lightbulb['folder']}_{$forum['fid']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span> 


To tyle z szablonami teraz został nam już tylko odpowiednie ostylowanie naszych ikonek w pliku css.

2 Style .css

Przejdź do Style i szabony -> <twój styl> -> global.css -> tryb zaawansowany

Znajdź i usuń:

.forum_status {
height: 30px;
width: 30px;
background: url(images/forum_icon_sprite.png) no-repeat 0 0;
display: inline-block;
}

.forum_on {
background-position: 0 0;
}

.forum_off {
background-position: 0 -30px;
}

.forum_offlock {
background-position: 0 -60px;
}

.forum_offlink {
background-position: 0 -90px;
}


Utwórzmy sobie teraz nowy plik .css (aby zachować jakiś porządek).
W pliku tym umieść i odpowiednio zmodyfikuj pod swoje potrzeby:

.forum_status {
height: 30px; /*wysokość Twoich ikonek */
width: 30px; /*szerokość Twoich ikonek */
background: url(images/forum_icon_sprite.png) no-repeat 0 0; /*ścieżka do pliku z ikonkami */
display: inline-block;
}


Dalej w tym samym pliku dodajemy


.forum_on_1, .forum_off_1 {
   background-position: 0 0;
}

.forum_on_2, .forum_off_2 {
   background-position: -30px 0;
}
/* i tak dalej */


Numerki przy klasach oznaczają fid działu dla którego przypisujemy ikonkę.
background-position: pozycja_pozioma pozycja_pionowa

3 Dodatkowe usprawnienia

Dodatkowo jeżeli twój dział jest zamknięty, lub jest on przekierowaniem należy zmienić w klasach on i off na offlock lub offlink. Twoja klasa dla takiego działu powinna wyglądać tak.


/* Dział zamknięty */
.forum_offlock_3 {
   background-position: pozycja_pozioma pozycja_pionowa;
}
/* Przekierowanie */
.forum_offlink_5 {
   background-position: pozycja_pozioma pozycja_pionowa;
}

Dzięki prostemu trikowi zrobimy odróżniające się ikonki działów które posiadają nowe posty, od tych które ich nie posiadają.
Do pliku .css dodaj

[class^="forum_off_"], [class*="forum_off_"]{
 opacity: 0.5;
}

Sprawi to, że ikonki działów bez nowych postów będą jaśniejsze (bardziej przeźroczyste).

Aby następowała poprawna zmiana ikonek podczas oznaczania działów jako przeczytanych należy zmodyfikować general.js

Otwórz plik jsscripts/general.js(w normalnym edytorze, np. notepad++). Linijkę 259:

markreadfid.removeClass('forum_on').addClass('forum_off'); 


Zamień na:

markreadfid.removeClass('forum_on_'+fid).addClass('forum_off_'+fid); 


Ten wątek nie służy do rozwiązywania Twoich problemów z ikonkami

Siemanko, chciałbym zwrócić uwagę ze forumbit nie znajduje się w widoku, a w opisie ,
U mnie z wgranymi kolumnami, kod wygląda inaczej, ale postaram się coś zdziałać, chyba ze masz radę

Matslom napisał 22.12.2014, 20:01:
Poprawiłem.
A co do Twojego problemu, to załóż nowy wątek.

Rozumiem, że jak chcę mieć kolorowe i szare nieaktywne ikony to wystarczy, że zastosuję taki trik w tej metodzie tutaj opisanej:

.forum_on_1 {
    background-position: 0 0;
}
.forum_off_1 {
    background-position: 0 30;
}

Inne pytanie jak nazywa się technika tworzenie takich ikonek w jednym zbiorze? Kiedyś ktoś to wymieniał, ale nie pamiętam. W Photoshopie da się to w prosty sposób wykonać czy jak ustawić wg współrzędnych i je potem móc odczytywać do podawania w kodzie CSS?

że zastosuję taki trik w tej metodzie tutaj opisanej:

Tak i do tego usuwasz to

[class^="forum_off_"], [class*="forum_off_"]{
  opacity: 0.5;
}

Inne pytanie jak nazywa się technika tworzenie takich ikonek w jednym zbiorze?

Icons sprite

W Photoshopie da się to w prosty sposób wykonać czy jak ustawić wg współrzędnych i je potem móc odczytywać do podawania w kodzie CSS?

Nie wiem jak w PS, ale są narzędzia do tego np. grunt js

grunt js ? to jakiś automizer, a są jakieś inne opcje aby zebrać przygotowane ikony wrzucić w równy układ i wykonać jeden plik... ewentualnie jak inaczej ręcznie, aby robić takie pliki?

Trochę nie mogę rozkminić tego:

background-position: 0px 0px;

Wiem co to jest, ale gubię się trochę przy projektowaniu ikon oraz ich ustawianiu.

Druga sprawa jak sprawdziłem plik general.js jest mocno zmodyfikowany czy aby taka modyfikacja nie odbije się czkawką dla forum?

Może można zrezygnować z tego pliku tzn. jego modyfikacji na rzecz innego rozwiązania. Jeśli go nie zastosujemy to przy kliknięciu oznacz jako przeczytane ikony źle się układają, ale po odświeżeniu potem wszystko wraca do normy.

Druga sprawa jak sprawdziłem plik general.js jest mocno zmodyfikowany czy aby taka modyfikacja nie odbije się czkawką dla forum?

Plik był modyfikowany dla 1.8.0 (jedna czy dwie linie, były modyfikowane), możliwe, że trochę się w nim zmieniło od tego czasu. W weekend zerknę do niego.

inne opcje aby zebrać przygotowane ikony wrzucić w równy układ i wykonać jeden plik... ewentualnie jak inaczej ręcznie, aby robić takie pliki?

w photoshopie/gimbie można ustawić prowadnice i wklejać ikonki do jednego pliku.

Trochę nie mogę rozkminić tego:

Są to wartości początkowe x y. Od tego miejsca zostanie pobrane tło do wyznaczonego przez width i height.

W Psie samo wyrównuje pojedyncze grafiki do już istniejącej - najlepiej na warstwach sobie to rozłożyć. Natomiast, żeby się dowiedzieć jakie współrzędne mają, to korzystamy z narzędzia odcinania (ikonka nożyka).

Plik był modyfikowany dla 1.8.0 (jedna czy dwie linie, były modyfikowane), możliwe, że trochę się w nim zmieniło od tego czasu. W weekend zerknę do niego.

Mam 1.8.4 najnowszą wersję z mybboard.com i z tłumaczeniem PL, ale ten .js z 1.8.4 jak porównasz sporo się różni, także trzeba to zweryfikować ewentualnie zmian dokonać na najnowszej wersji, aby nie było tak że się fora będą sypać.

A w Photoshopie zbiór ikon robię tak i tek też odczytuję wartości współrzędnych.

Może można zrezygnować z tego pliku tzn. jego modyfikacji na rzecz innego rozwiązania. Jeśli go nie zastosujemy to przy kliknięciu oznacz jako przeczytane ikony źle się układają, ale po odświeżeniu potem wszystko wraca do normy.

A nie lepiej wgrać stary plik .js? można to zrobić i czy po kliknięciu na oznacz temat jako przeczytany automatycznie zmieni się nam ikona bez odmierzania strony?

Zmiany jakie trzeba dokonać w pliku .js zostały opisane w poście, bez tego nie będą zmieniały się ikonki przy oznaczaniu działów bez odświeżania strony.

Mam tu swoje forumbit_depth2_forum :

<tr>
<td class="{$bgcolor}" align="center" valign="middle" width="1"><div class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"><i class="fa fa-gamepad"></i></div></td>
<td class="{$bgcolor}" valign="middle">
<strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$modlist}{$subforums}</div>
</td>
<td class="{$bgcolor}" valign="middle" align="right" width="17%" style="white-space: nowrap">
  {$threads}{$unapproved['unapproved_threads']} Tematy &nbsp;&nbsp;<br />
  {$posts}{$unapproved['unapproved_posts']} Posty &nbsp;&nbsp;
  </td>
<td class="{$bgcolor}" valign="middle" align="left" width="19%" style="white-space: nowrap">{$lastpost}</td>
</tr> 


I jak ja mam to tu da jak tu tego niema?

<div class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"><i class="fa fa-gamepad"></i></div>

na

<div class="forum_status forum_{$lightbulb['folder']}_{$forum['fid']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"><i class="fa fa-gamepad"></i></div>

Mi nie dziala robilem wszystko po kolei i nie pokazuje mi ikonek

Szogi1910 napisał 04.11.2015, 18:17:
Załóż oddzielny wątek z problemem a pewnie ktoś ci pomoże.

Ten opis jest dobry jak chcemy zrobić ikony aktywnych działów i działów np. gdzie tematy są przeczytane. Można też zrobić to bez angażowania Icons sprite czyli wystarczy zrobić ikonki jako pojedyncze pliki, ale ma to swoje + i -.

Jednak jeśli ktoś chce poustawiać sobie działy ikonami może użyć wtyczki: MyForumIcons - Custom Forum Icons
http://community.mybb.com/mods.php?action=view&pid=457

Nie testowałem tego dobrze, ale da radę w prosty sposób przeprowadzić operację ze zmianą ikon, także może komuś się przyda.

Mam pytanko, czy tym sposobem można ustawić tylko dla wybranych działów, a pozostałe działy niech mają taką samą ikonę?

Na zasadzie, że chcę dla głównych działów ustawić custom icons, a dla poddziałów dać wszędzie takie same.