15.11.2015, 02:08
Za pomocą dodatkowych pól profilu można bardzo łatwo i przyjemnie wykonać prostą modyfikacje znaną z pluginów typu 'profile design', a mianowicie - własne tło profilu dla każdego użytkownika. Różnica polega na tym, że nie musisz instalować żadnych tego typu dodatków - taka opcja ukryta jest w podstawowym silniku MyBB.
Szczerze mówiąc, nie jestem pewny czy dokładnie tak wygląda ten fragment w stylu podstawowym, być może na moim forum testowym kiedyś coś zmieniłem w tym elemencie. Aczkolwiek jeśli tylko posiadasz oczy, rozpoznasz bez problemu o który element chodzi 
Do tabeli dodajemy klase.tlo_profil :
1 Utwórz dodatkowe pole profilu.
Wejdź w Panel Administracyjny (dalej zwany w skrócie PA) -> Konfiguracja -> Dodatkowe pola profilu (z menu po lewej stronie PA) -> Nowe pole w profilu. Wypełnij:
- Nazwa - Tło profilu
- Opis - Adres URL zaczynający się od http i kończący rozszerzeniem obrazu .jpg/.jpeg/.png/.gif
- Typ pola - Textbox
- Wyrażenie regularne -
(http(s?)|([/|.|\w|\s])*\.(?:jpg|gif|png|jpeg) - Maksymalna długość - dowolnie, np. 1000
- Dostępne tylko dla użytkowników z określoną liczbą postów? - 0
- Kolejność wyświetlania - 0
- Wymagane - Nie
- Pokazywać podczas rejestracji - Nie / Tak
- Pokazywać w profilu użytkownika - Tak
- Wyświetlać w opisie posta - Nie
- Widoczne dla - Wszystkie grupy
- Edytowalne przez - Wszystkie grupy
- Zezwalaj na parsowania - brak
Cytat:http://adres twojego forum/admin/index.php?module=config-profile_fields&action=edit&fid=X
Gdzie X jest jakąś cyfrą, np. 4. Zapamiętujemy tą cyfrę, gdyż jest ona istotna w dalszej części.
2 Dodanie odpowiedniego kodu do szablonu member_profile
Wchodzimy w PA -> Style i szablony -> Szablony -> Twoja nazwa Szablony -> Podgląd profilu szablony -> member_profile
W tej lokacji interesuje nas najpierw fragment między znacznikami <head> . Przed znacznikiem zamykającym, czyli </head> dodajemy następujący kod:
<style>
.tlo_profil {
background-image: url({$userfields['fidX']}), url(obraz zastępczy);
}
</style>W powyższym kodzie w fragmencie ['fidX'] zamiast X podajemy cyfrę uzyskaną w punkcie 1. W moim przypadku jest to wspomniana czwóreczka (4).
Zamiast tekstu obraz zastępczy wklejamy link do tła podstawowego, które pojawi się w przypadku gdy użytkownik nie zdefiniuje swojego własnego tła.
Następnie należy dodać tą klasę do odpowiednich elementów. Jako, że poradnik bazujemy na szablonie podstawowym dodamy to do tabeli:
<fieldset>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="75%">
<span class="largetext"><strong>{$formattedname}</strong></span><br />
<span class="smalltext">
({$usertitle})<br />
{$groupimage}
{$userstars}<br />
<br />
<strong>{$lang->registration_date}</strong> {$memregdate}<br />
<strong>{$lang->date_of_birth}</strong> {$membday} {$membdayage}<br />
<strong>{$lang->local_time}</strong> {$localtime}<br />
<strong>{$lang->postbit_status}</strong> {$online_status}
</span>
</td>
<td width="25%" align="right" valign="middle">{$avatar}</td>
</tr>
</table>
</fieldset>Do tabeli dodajemy klase
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="tlo_profil">Opcjonalnie możemy usunąć znaczniki <fieldset> </fieldset> dla poprawy wizualnej, bądź nadać im wartość padding: 0px; w stylach. Zmiana wedle uznania.
Wejdź w Panel Użytkownika -> Twój profil -> Edytuj profil -> Dodatkowe informacje -> Tło profilu i wklej link do pożądanego tła, a następnie wejdź w swój profil dla sprawdzenia efektu.
Zamierzony efekt został osiągnięty, pozostaje dostosować wygląd do swoich, indywidualnych wymagań.
Dodając klasę.tlo_profil do global.css naszego stylu możemy nadawać mu różne wartości css - określać kolor tekstu na tle, cienie, marginesy, wielkość i pozycje tła. Możemy także dodać dowolne klasy do wierszy (tr) i kolumn (td) tabeli by uzyskać jeszcze lepsze efekty. W przypadku braku umiejętności odsyłam do poradnika o podstawach CSS
Za pomocą tej metody możemy analogicznie stylizować inne elementy profilu użytkownika czy np. wyglądu posta danego usera.
Efekt z jakże pięknym tłem z wujka google:
3 Dodaj link do obrazka w swoim profilu dla sprawdzenia efektu
Wejdź w Panel Użytkownika -> Twój profil -> Edytuj profil -> Dodatkowe informacje -> Tło profilu i wklej link do pożądanego tła, a następnie wejdź w swój profil dla sprawdzenia efektu.
4 Dodatkowe stylizacje
Zamierzony efekt został osiągnięty, pozostaje dostosować wygląd do swoich, indywidualnych wymagań.
Dodając klasę
Za pomocą tej metody możemy analogicznie stylizować inne elementy profilu użytkownika czy np. wyglądu posta danego usera.
Efekt z jakże pięknym tłem z wujka google:
