Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

Krugerz

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

Promowane odpowiedzi

Krugerz    590

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

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 ich nie macie 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 > SzablonyWybieramy 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 > StyleWybieramy 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:

 

s1.png.11d7d63ce078febcb0def5ac036b9e16.

 

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.

 

s2.png.089c509c1222a6f6b2477bf66bfd4d55.

 

W tym przypadku jest to f0c2.

 

4. Znowu przechodzimy do CSS (ACP > Style i szablony > StyleWybieramy 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 są identyfikatory.

 

.icon_1:before
{
	content:'\f0c2';
}

 

Za każdym razem gdy chcemy dodać nową ikonkę powtarzamy pkt. 3 oraz 4.

 

Wygląda to tak:

s3.thumb.png.4c3c1b6051dd122245a895a966d

 

Oczywiście można to wystylizować. 

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

 

Autor: Krugerz.

  • Lubię to! 5

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony.


×