30.12.2016, 20:44
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 →
Znajdź:
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 →
Zamień:
Kod:
<span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span>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 →
Zamień:
Kod:
<span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span>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 →
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;
}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 →
- 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 →
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;
}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 →
Zamień:
Kod:
<div title="{$lightbulb['altonoff']}" class="subforumicon subforum_{$lightbulb['folder']} ajax_mark_read" id="mark_read_{$forum['fid']}"></div>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 → NazwaTwojegoStylu→
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
ale to tak przy okazji