Webboard

Pełna wersja: Jak zmienić obrazki działów na ikony Font-Awesome?
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.

1 Implementacja Font-Awesome

 
Pomiń ten krok jeśli na swoim forum używasz już FA!

Przejdź na stronę https://fontawesome.com/start. Zostaniesz poproszony o podanie e-maila, na którego dostaniesz wiadomość z instrukcją. Potwierdź konto i podaj wymagane dane. Jeśli wszystko przejdzie poprawnie, dostaniesz wygenerowany kod (your kit's code). Skopiuj go.
[attachment=14745]
ACP → Style i szablony → Szablony → NazwaTwojegoSzablonu → Niezgrupowane szablony → headerinclude
Znajdź: {$stylesheets}, nad nim wklej skopiowany kod (your kit's code).

Może się zdarzyć, że nie znajdziesz tego szablonu w sekcji Niezgrupowane szablony, wtedy poszukaj w grupie  Nagłówek

2 Edycja szablonów - domyślna ikona


ACP → Style i szablony → Szablony → NazwaTwojegoSzablonu → Opis działu →  forumbit_depth2_forum
Zamień: 

Kod:
<span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span>
na:
Kod:
<div class="forum_status forum_{$lightbulb['folder']} ajax_mark_read ficons_{$forum['fid']}" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"><i class="fas fa-comment"></i></div>
Domyślnie (jeśli nie nadpiszesz w CSS ikonki danego działu) będzie wyświetlana ikona dymka - <i class="fas fa-comment"></i>. Możesz to zmienić tutaj.


ACP → Style i szablony → Szablony → NazwaTwojegoSzablonu → Opis działu → forumbit_depth2_cat
Zamień:  

Kod:
<span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span>
na:  
Kod:
<div class="forum_status forum_{$lightbulb['folder']} ajax_mark_read ficons_{$forum['fid']}" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"><i class="fas fa-comment"></i></div>

3 Edycja arkuszy CSS


ACP →  Style i szablony → NazwaTwojegoStylu global.css
Zamień:
Kod:
.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;
}
na:
Kod:
.forum_status {
height: 50px;
width: 50px;
font-size: 30px;
text-align: center;
}

.forum_status i {
display: inline-block;
line-height: 50px;
}

.forum_on {
color: #0094d1;
}

.forum_off, .forum_offlock, .forum_offlink {
color: #333;
}

.forum_off i {
opacity: .4;
}

.forum_offlock i:before {
content: "\f023";
}

.forum_offlink i:before {
content: "\f0c1";
}

4 Stworzenie arkusza CSS z faviconami


ACP → Style → Twój_styl → Nowy arkusz CSS
  • Nazwa pliku: ficons.css (nazwa dowolna, powinna Ci mówić, że tu jest CSS od ikon działów)
  • Dołączane do: Do wszystkich
  • Wpisz podaną przeze mnie zawartość:
Kod:
/*My Forum - dog icon*/
.ficons_2 i:before {
    content: "\f6d3";
}
/*My Forum2 - bell icon*/
.ficons_3 i:before {
   content: "\f0f3";
}


Aby znaleźć "numer działu", wejdź do ACP → Działy i posty → Dział, któremu zmieniasz ikonę → na pasku adresu (na końcu) po &fid= znajduje się pewna liczba, to właśnie ją trzeba wkleić po .ficons_ 

Aby zmienić podaną przeze mnie ikonę FA, przejdź na stronę https://fontawesome.com/icons pod nazwą wybranej przez Ciebie ikony znajduje się ciąg kilku znaków, skopiuj go, np. f209, wklej go po znaku \ w stworzonym chwilę temu arkuszu, w odpowiedniej klasie oczywiście

[attachment=14747]

Do tej pory osiągneliśmy taki wygląd działów:
[attachment=14746]

5 Zmiana ikon poddziałów


ACP →  Style i szablony → NazwaTwojegoStylu global.css
Zamień:
Kod:
.subforumicon {
height: 10px;
width: 10px;
display: inline-block;
margin: 0 5px;
background: url(images/mini_status_sprite.png) no-repeat 0 0;
}

.subforum_minion {
background-position: 0 0;
}

.subforum_minioff {
background-position: 0 -10px;
}

.subforum_miniofflock {
background-position: 0 -20px;
}

.subforum_miniofflink {
background-position: 0 -30px;
}
na:
Kod:
.subforumicon {
height: 10px;
width: 10px;
display: inline-block;
 margin: 0 5px;
}

.subforum_minion {
color: #333;
}

.subforum_minioff, .subforum_miniofflock, .subforum_miniofflink {
color: #333;
}

.subforum_minioff {
opacity: .4;
}

.subforum_miniofflock i:before {
content: "\f023";
}

.subforum_miniofflink i:before {
content: "\f0c1";
}


ACP → Style i szablony → Szablony → NazwaTwojegoSzablonu → Opis działu →  forumbit_depth3_statusicon
Zamień:
Kod:
<div title="{$lightbulb['altonoff']}" class="subforumicon subforum_{$lightbulb['folder']} ajax_mark_read" id="mark_read_{$forum['fid']}"></div>
na:
Kod:
<div title="{$lightbulb['altonoff']}" class="subforumicon subicons_{$forum['fid']} subforum_{$lightbulb['folder']} ajax_mark_read" id="mark_read_{$forum['fid']}"><i class="fas fa-arrow-right"></i></div>
 
Domyślnie (jeśli nie nadpiszesz w CSS ikonki danego poddziału) będzie wyświetlana ikona strzałki w prawo - <i class="fas fa-arrow-right"></i>. Możesz to zmienić tutaj. Pomiń dalsze instrukcje jeśli chcesz, aby wszystkie subfora miały tą samą ikonkę. 

ACP → Style → NazwaTwojegoStyluficons.css
Dopisz:
Kod:
/*Test subforum - dog icon*/
.subicons_5 i:before {
    content: "\f6d3";
}


Efekt końcowy (bez dostosowywania ikon poddziałów):
[attachment=14748]

Inspirowane https://community.mybb.com/thread-156711.html
Zaktualizowałem poradnik do najnowszego MyBB 1.8.14 (na tę chwilę) oraz Font Awesome 5.0.1.
Pod linkiem jest błąd 404 ;) ale to tak przy okazji
Mam pytanie czy jest możliwe dodanie do istniejącego już na forum FA 4.7.0 FA 5.7.2 i do czasu podmiany używania obu wersji??
Łatwiej by mi to było robić krok po kroku bo sporo jest w moim szablonie tych ikon.
(18.02.2019, 17:54)Bouli napisał(a): [ -> ]Pod linkiem jest błąd 404 ;) ale to tak przy okazji
Mam pytanie czy jest możliwe dodanie do istniejącego już na forum FA 4.7.0 FA 5.7.2 i do czasu podmiany używania obu wersji??
Łatwiej by mi to było robić krok po kroku bo sporo jest w moim szablonie tych ikon.

https://fontawesome.com/start
I masz masz kod, który musisz wkleić ;)
Bardziej mi chodziło o korzystanie z dwóch jednocześnie ;)

w headerinclude nad {$stylesheets} mam:
Kod:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

jak teraz dodam od wersji 5 to znika mi połowa ikon, a chciałem tego uniknąć, lepiej mi się coś podmienia jak to widzę.
(20.07.2019, 21:08)Taki Tam Slu napisał(a): [ -> ]Słaby poradnik, więcej wkurwu niż zabawy.
Na czystej instalacji mybb działa, przed chwilą przetestowałem. Na innych szablonach pewnie trzeba trochę pomyśleć ^_^.
W wolnej chwili poprawię krok 1. - implementację FA, bo jakiś czas temu to się akurat zmieniło.
Jeśli czegoś nie zrozumiałeś - śmiało, pytaj! ;) Albo.. napisz własny (lepszy) poradnik, czemu by nie?

Aktualizacja 31.07.2019
Poprawa 1. kroku, screenów, domyślnych ikon, kodu szablonów do poddziałów.