Jak dodać osobną ikonkę do każdej kategorii?

Założony przez  Gandziu.

Witajcie, w tym poradniku pokaże wam jak dodać osobną ikonkę do każdej kategorii w mybb.
 
0. Będziemy korzystać z ikonek Font Awesome, więc jeśli nie macie ich jeszcze zaincludowanych do stylu zróbcie to teraz.
Przechodzimy do ACP > Style i szablony > Szablony > Wybieramy swój szablon > Niezgrupowane szablony > Headerinclude
Znajdujemy {$stylesheets} i dodajemy poniżej ten kod:


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
1. Jeżeli mamy już wgrane ikonki teraz przechodzimy do ACP > Style i szablony > Szablony > Wybieramy swój szablon > Opis Działu >Forumbit_depth1_cat
Znajdujemy ten kod:


<div><strong><a href="{$forum_url}">{$forum['name']}</a></strong><br /><div class="smalltext">{$forum['description']}</div></div>
Zamieniamy na ten:

<div><div class="category_icon icon_{$forum['fid']}"></div><strong><a href="{$forum_url}">{$forum['name']}</a></strong><br /><div class="smalltext">{$forum['description']}</div></div>
2. Następnie przechodzimy do CSS (ACP > Style i szablony > Style > Wybieramy swój styl > Global.css)
Na samym końcu dodajemy poniższy kod:


.category_icon {
padding:0 10px;
display: inline-block;
text-align:center;
}

.category_icon:before {
font-family: 'FontAwesome';
color: #fff; /* kolor ikonki */
  font-size: 15px; /* wielokosc ikonki */
  vertical-align:middle;
}

3. I teraz najważniejsze. Sprawdzamy id kategorii oraz id ikonki (unicode).
a) id kategorii, przechodzimy do ACP > Działy i posty > Działy
Wybieramy kategorię, do której chcemy dodać ikonkę. Identyfikator znajduje się w adresie:


[Obrazek: s1.png.11d7d63ce078febcb0def5ac036b9e16.png]
W moim przypadku jest to kategoria o identyfikatorze 1.
b) id ikonki, przechodzimy na http://fortawesome.github.io/Font-Awesome/icons/ i wybieramy ikonkę pasującą do naszej kategorii.

[Obrazek: s2.png.089c509c1222a6f6b2477bf66bfd4d55.png]
W tym przypadku jest to f0c2.
4. Znowu przechodzimy do CSS (ACP > Style i szablony > Style > Wybieramy swój styl > Global.css)
Nasze id działu to 1, a ikonki to \f0c2 (Backslash nie jest błędem tylko tak oznacza się unicode w css).
Dodajemy na końcu taki kod, zauważcie gdzie umieszczone jest id działu oraz unicode ikonki.


.icon_1:before
{
content:'\f0c2';
}
Za każdym razem gdy chcemy dodać nową ikonkę powtarzamy pkt. 3 oraz 4.
Wygląda to tak:

[Obrazek: s3.thumb.png.4c3c1b6051dd122245a895a966db15db.png]
Oczywiście można to wystylizować. 

Jeśli zauważycie jakiś błąd proszę o kontakt.  

 
Autor: Krugerz.
ficus napisał 14.12.2016, 11:33:
Poradnik zostaje przeniesiony do archiwum ze względu na wygasłe screeny.
Screeny nie działają
DeadlyGlobe71: Działają - masz. ;)

Screen nr. 1:
[Obrazek: s1.png.11d7d63ce078febcb0def5ac036b9e16.png]

Screen nr. 2:
[Obrazek: s2.png.089c509c1222a6f6b2477bf66bfd4d55.png]

Screen nr. 3:
[Obrazek: s3.thumb.png.4c3c1b6051dd122245a895a966db15db.png]



Użytkownicy przeglądający ten wątek:

1 gości