Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Własne tło profilu użytkownika

Założony przez ficus.

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.

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
Po zapisaniu wchodzimy raz jeszcze do tej lokalizacji i klikamy nazwę nowo utworzonego pola. Po tej akcji w pasku przeglądarki powinien pojawić się następujący link:
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>
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:

<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. 

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ę .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:

   

"Try not. Do... or do not. There is no try."
Poświęć 5 minut. Nie bądź ignorantem!  -  Jak zbadać element?
Wgrałem i działa, zmieniłem sobie bez problemu tło, natomiast gdy ktoś się próbuję zarejestrować to jest błąd:

Popraw następujące błędy:
Nie wprowadzono prawidłowej wartości do pola \"Tło profilu\". Podaj poprawną wartość.

Chociaż mam ustawione by nie wymagało przy rejestracji. ;)
U mnie wyświetla prawidłowo podczas rejestracji, mógłbyś pokazać screena pełnych ustawień tego pola?
Ew. usuń wyrażenie regularne, które odpowiada za sprawdzenie czy wprowadzona wartość jest linkiem do grafiki
"Try not. Do... or do not. There is no try."
Poświęć 5 minut. Nie bądź ignorantem!  -  Jak zbadać element?
Usunąłem te wyrażenie regularne i działa. ;)
Jakoś bardzo potrzebne to nie jest, ale nie da się tego wyrażenia jakoś inaczej napisać by nie blokowało rejestracji?
Jeśli to blokuje rejestracje mimo, że na 100% masz wyłączone w ustawieniach wszelkie opcje wymogu tego pola przy rejestracji to jest to błąd silnika nie samego wyrażenia
"Try not. Do... or do not. There is no try."
Poświęć 5 minut. Nie bądź ignorantem!  -  Jak zbadać element?
u mnie nie pojawia się w ogóle tło. Wpisywałem wszystko tak jak w poradniku ale nadal nic nie działa. Tą drugą wartość .tlo_profil trzeba zrobić w tabeli czy jak?
Ktoś powie gdzie dokładnie dodać tą klasę, do jakiej tabeli
mi również pojawia się błąd z rejestracją. Zastanawiałem się, czy dodanie (^$)| na początku do tego wyrażenia regularnego coś pomoże, ale nie jestem w tym dobry, a na żywym organiźmie wolę nie testować...


(28.01.2018, 13:14)graczx napisał(a): Ktoś powie gdzie dokładnie dodać tą klasę, do jakiej tabeli

masz podane, w której. W tej, co zaczyna się po <fieldset>.
(30.03.2018, 09:06)snajperx napisał(a): mi również pojawia się błąd z rejestracją. Zastanawiałem się, czy dodanie (^$)| na początku do tego wyrażenia regularnego coś pomoże, ale nie jestem w tym dobry, a na żywym organiźmie wolę nie testować...


(28.01.2018, 13:14)graczx napisał(a): Ktoś powie gdzie dokładnie dodać tą klasę, do jakiej tabeli

masz podane, w której. W tej, co zaczyna się po <fieldset>.
Na końcu spróbuj dodać |
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.
Gdzie dodać tą klasę w jakim szablonie czy co
(17.06.2018, 10:33)Lemo napisał(a): Gdzie dodać tą klasę w jakim szablonie czy co

Podgląd profilu->member_profile-> dodajesz klase
tlo_profil
do twojego header, czyli:
<div class="header tlo_profil">



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

2 gości