[MyBB] Poradnik - Status rekruatacji on/off

[Paweł.]

 

W tym poradniku nauczysz się ustawiać prawidłowo status rekrutacji (otwarta / zamknięta) w działach Twojego forum opartego na MyBB. Statusy stanowią świetny sposób na informowanie użytkowników naszej społeczności, o miejscach na dane stanowiska. Dodatkowo nauczysz się implementować nową wersję ikon Font Awesome.

 

Implementacja ikon Font Awesome

 

Aby prawidłowo zaimplementować nasze ikony musimy zalogować się do ACP, potem musimy przejść do modyfikowania naszego motywu (ACP -> Style i szablony -> Szablony -> niezgrupowane szablony -> headerinclude), gdy już znajdujemy się w szablonie headerinclude, na samej górze, a dokładniej pod:

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/general.js?ver=1827"></script>

 

musimy dodać nasz kod, który wygląda tak:

 

<link rel='stylesheet' href='https://use.fontawesome.com/releases/v6.4.2/css/all.css'>
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v6.4.2/css/v4-shims.css'>

 

Cały kod powinien wyglądać tak:

Spoiler

<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.js?ver=1823"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.plugins.min.js?ver=1821"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/general.js?ver=1827"></script>
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v6.4.2/css/all.css'>
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v6.4.2/css/v4-shims.css'>

 

No i w taki łatwy sposób zaimplementowaliśmy nową wersję ikon Font Awesome. Podsyłam Wam jeszcze link, gdzie możecie znaleźć darmowe ikony do wykorzystania na Waszym forum. Free Icons Font Awesome

 

Implementacja kodu CSS naszych statusów

 

Po prawidłowej implementacji Font Awesome możemy przejść do stworzenia naszych statusów. A więc tak, od początku. Jako pierwszy krok stwórzmy sobie nowy styl (ACP -> Style i szablony -> Style -> Nowy arkusz CSS). Nazwa jest obojętna, w tym poradniku użyjemy nazwy stylu custom.css. Po stworzeniu naszego szablonu musimy dodać do niego kod, dzięki któremu będziemy mogli stworzyć sobie statusy. Poniżej przedstawiam Wam przykładowy kod na owe "kłódki"

Spoiler

.kat-status {
	height: 17px;
	font-size: 10px;
	padding: 1px 5px;
	border-radius: 3px;
	display: inline-block;
	vertical-align: middle;
	color:#fff;
} 

.kat-status.kat-off {
	background: linear-gradient(90deg, rgba(223,115,107,1) 0%, rgba(190,5,5,1) 25%);
}
.kat-status.kat-on {
	background: linear-gradient(90deg, rgba(107,223,168,1) 0%, rgba(5,190,71,1) 25%);
}

.kat-status.kat-on i, .kat-status.kat-off i {
	line-height: 17px;
} 

 

Dodawanie statusów do naszych działów

 

Jeżeli dotrałeś(aś) do tego punktu, to znaczy, że wszystko Ci się udało! Teraz został najłatwiejszy punkt, edytowanie naszego działu, raczej każdy da z tym rade. Aby edytować dział musimy ponownie podziałać w naszym ACP, a dokładniej musimy przejść ACP -> Działy i posty -> Wybieramy nasz dział, który chcemy edytować -> Edytuj ustawienia działu -> W naszym tytule dodajemy kod, który doda nam nasze statusy. Oczywiście poniżej przedstawiam wykorzystanie powyższego kodu CSS. 

Dla otwartej rekrutacji (otwarty status / kłódka):

Moderator <span class="kat-status kat-on"><i class="fa-solid fa-lock-open"></i></span>

 

Dla zamkniętej rekrutacji (zamknięty status / kłódka):

Moderator <span class="kat-status kat-off"><i class="fa-solid fa-lock"></i></span>

 

Po prawidłowym dodaniu naszego kodu powinniśmy ujrzeć taki efekt:

Spoiler

 

Aktualizacja poradnika status rekrutacji