phpBB2 by Przemo

[ProGamer]

Siema

chce sobie w Headerze dać Panel logowania i nieumiem tego zrobic ) Prosze o pomoc Dam Pomógł

[Gadatliwa Kasia]

[Majkelo]

No więc jedziemy

Wyciągnij sobie swój header na pulpit, odpal jakiś program graficzny, np. GIMP i w miejscu gdzie chcesz mieć panel logowania nanieś taki "prostokąt" o wymiarach 310 x 135, wypełnij ten prostokąt np. czarnym kolorem i nadaj mu przeźroczystość powiedzmy 70% + możesz mu zaokrąglić dla kosmetyki rogi. Jeśli chcesz możesz też dodać jakiś napis na górze, np. Panel Usera, czy coś.

Teraz czas na zakodowanie panelu logowania.
Pole logowania - nick:

Otwórz overall_header.tpl i znajdź div'a który odpowiada za wyświetlanie Twojego nagłówka (headera), przykład jak to może wyglądać:

Kod:

<!-- BEGIN header --> <div id="logo"> JAKIS KOD </div>

Dodaj do ww. div'a (czyli logo) w .css atrybut:

Kod:

position:relative;

Teraz wewnątrz div'a (czyli tam gdzie w powyższym przykładzie jest napisane JAKIS KOD) umieść to:

Kod:

<!-- BEGIN switch_user_logged_out -->             <form method="post" action="{S_LOGIN_ACTION}">             <input type="text" name="username" size="20" maxlength="40" value="nick" class="login" style="border: 0px; padding-top:7px; padding-left:27px;" onBlur="if(this.value=='') this.value='nick';" onFocus="if(this.value=='nick') this.value='';" >

Otwórz templates/nazwastylu/nazwastylu.css

Dodaj to po którejkolwiek zakończonej klasie (klasy w css kończą się zawsze: })

Kod:

.login {background: url(images/inputlogin.jpg) no-repeat; width:185px; height:29px; color:#0D0E0F;     position:absolute; top:Xpx; right:Xpx;}

UWAGA: W powyższym przykładzie litery X należy zastąpić liczbami w pikselach. Kolejno - top: TUTAJ ODSTĘP OD TOPA W PIKSELACH // right: TUTAJ ODSTĘP OD PRAWEJ STRONY (oczywiście jeśli chcemy mieć logowanie po lewej stronie, right zmieniamy na left i podajemy odstęp od lewej strony).
Powyższe wartości podajemy na tzw. oko, aż się odpowiednio ustawi.






Pole logowania - hasło:

Otwórz overall_header.tpl i znajdź:

Kod:

<!-- BEGIN switch_user_logged_out -->             <form method="post" action="{S_LOGIN_ACTION}">             <input type="text" name="username" size="20" maxlength="40" value="nick" class="login" style="border: 0px; padding-top:7px; padding-left:27px;" onBlur="if(this.value=='') this.value='nick';" onFocus="if(this.value=='nick') this.value='';" >

Bezpośrednio po tym dodaj:

Kod:

<input type="password" name="password" size="20" maxlength="25" class="password" style="border: 0px; padding-top:7px; padding-left:27px;" value="hasło" onBlur="if(this.value=='') this.value='hasło';" onFocus="if(this.value=='hasło') this.value='';" >

Otwórz templates/nazwastylu/nazwastylu.css

Znajdź:

Kod:

.login {background: url(images/inputlogin.jpg) no-repeat; width:185px; height:29px; color:#0D0E0F;     position:absolute; top:Xpx; right:Xpx;}

Dodaj po:

Kod:

.password {background: url(images/inputpassword.jpg) no-repeat; width:185px; height:29px; color:#292929;     position:absolute; top:Xpx; right:Xpx;}

UWAGA: W powyższym przykładzie litery X należy zastąpić liczbami w pikselach. Kolejno - top: TUTAJ ODSTĘP OD TOPA W PIKSELACH // right: TUTAJ ODSTĘP OD PRAWEJ STRONY (oczywiście jeśli chcemy mieć logowanie po lewej stronie, right zmieniamy na left i podajemy odstęp od lewej strony).
Powyższe wartości podajemy na tzw. oko, aż się odpowiednio ustawi.





Przycisk (button) "zaloguj":

Otwórz overall_header.tpl i znajdź:

Kod:

<input type="password" name="password" size="20" maxlength="25" class="password" style="border: 0px; padding-top:7px; padding-left:27px;" value="hasło" onBlur="if(this.value=='') this.value='hasło';" onFocus="if(this.value=='hasło') this.value='';" >

Dodaj bezpośrednio po:

Kod:

<input type="submit"  name="login" class="zaloguj" value="" style="border: 0px;">

Otwórz templates/nazwastylu/nazwastylu.css

znajdź:

Kod:

.password {background: url(images/inputpassword.jpg) no-repeat; width:185px; height:29px; color:#292929;     position:absolute; top:Xpx; right:Xpx;}

Dodaj po:

Kod:

.zaloguj {background: url(images/zaloguj.jpg) no-repeat; width:71px; height:70px;     position:absolute; top:Xpx; right:Xpx;}

UWAGA: W powyższym przykładzie litery X należy zastąpić liczbami w pikselach. Kolejno - top: TUTAJ ODSTĘP OD TOPA W PIKSELACH // right: TUTAJ ODSTĘP OD PRAWEJ STRONY (oczywiście jeśli chcemy mieć logowanie po lewej stronie, right zmieniamy na left i podajemy odstęp od lewej strony).
Powyższe wartości podajemy na tzw. oko, aż się odpowiednio ustawi.





Pole checkbox - "zapamiętaj mnie":

Otwórz overall_header.tpl i znajdź:

Kod:

<input type="submit"  name="login" class="zaloguj" value="" style="border: 0px;">

Dodaj bezpośrednio po:

Kod:

<span class="zapa">Zapamiętaj mnie</span>             <input class="zapamietaj" type="checkbox" name="autologin" style="border:0;">

Otwórz templates/nazwastylu/nazwastylu.css

znajdź:

Kod:

.zaloguj {background: url(images/zaloguj.jpg) no-repeat; width:71px; height:70px;     position:absolute; top:Xpx; right:Xpx;}

Dodaj po:

Kod:

.zapa{position:absolute; right:Xpx; top:Xpx; color:#fcfcfc;} .zapamietaj {position:absolute; right:Xpx; top:Xpx;}

UWAGA: W powyższym przykładzie litery X należy zastąpić liczbami w pikselach. Kolejno - top: TUTAJ ODSTĘP OD TOPA W PIKSELACH // right: TUTAJ ODSTĘP OD PRAWEJ STRONY (oczywiście jeśli chcemy mieć logowanie po lewej stronie, right zmieniamy na left i podajemy odstęp od lewej strony).
Powyższe wartości podajemy na tzw. oko, aż się odpowiednio ustawi.





Link "zarejestruj się" oraz "przypomnij hasło":

Otwórz overall_header.tpl i znajdź:

Kod:

<span class="zapa">Zapamiętaj mnie</span>             <input class="zapamietaj" type="checkbox" name="autologin" style="border:0;">

Dodaj bezpośrednio po:

Kod:

<a href="profile.php?mode=sendpassword" class="przypomnij">Zapomniałem hasła</a>             <div class="rejestracja">Nie masz u nas konta? <a href="{U_REGISTER}" class="zare">ZAREJESTRUJ SIE TERAZ</a> </div>             </form>     <!-- END switch_user_logged_out -->

Otwórz templates/nazwastylu/nazwastylu.css

znajdź:

Kod:

.zapa{position:absolute; right:Xpx; top:Xpx; color:#fcfcfc;} .zapamietaj {position:absolute; right:Xpx; top:Xpx;}

Dodaj po:

Kod:

a.przypomnij {position:absolute; right:Xpx; top:Xpx; color:#fcfcfc; text-decoration: none;} a.przypomnij:hover {  text-decoration: underline;} a.zare { color:#2dbffc; text-decoration: none; font-weight:bold;} a.zare:hover { color:#3cc2fa; text-decoration: underline; font-weight:bold;} .rejestracja {position:absolute; right:Xpx; top:Xpx;  }

UWAGA: W powyższym przykładzie litery X należy zastąpić liczbami w pikselach. Kolejno - top: TUTAJ ODSTĘP OD TOPA W PIKSELACH // right: TUTAJ ODSTĘP OD PRAWEJ STRONY (oczywiście jeśli chcemy mieć logowanie po lewej stronie, right zmieniamy na left i podajemy odstęp od lewej strony).
Powyższe wartości podajemy na tzw. oko, aż się odpowiednio ustawi.





Po zalogowaniu - menu usera:

Otwórz overall_header.tpl i znajdź:

Kod:

<a href="profile.php?mode=sendpassword" class="przypomnij">Zapomniałem hasła</a>             <div class="rejestracja">Nie masz u nas konta? <a href="{U_REGISTER}" class="zare">ZAREJESTRUJ SIE TERAZ</a> </div>             </form>     <!-- END switch_user_logged_out -->

Dodaj bezpośrednio po:

Kod:

<!-- BEGIN switch_user_logged_in -->     <div class="loginin">     &nbsp;<a href="{U_PRIVATEMSGS}"  class="loginlinki">{PRIVATE_MESSAGE_INFO}</a> <br>     &nbsp;<a href="{U_PROFILE}"  class="loginlinki">{L_PROFILE}</a>  <br>     &nbsp;<a href="{U_LOGIN_LOGOUT}"  class="loginlinki">{L_LOGIN_LOGOUT}</a>  <br>     </div>         <!-- END switch_user_logged_in -->

Otwórz templates/nazwastylu/nazwastylu.css

znajdź:

Kod:

.rejestracja {position:absolute; right:Xpx; top:Xpx;  }

Dodaj po:

Kod:

.loginin  {position:absolute; right:Xpx; top:Xpx;  } a.loginlinki,a.loginlinki:hover {font-size:11px; font-weight:bold; color:#fcfcfc; text-decoration: none;}

UWAGA: W powyższym przykładzie litery X należy zastąpić liczbami w pikselach. Kolejno - top: TUTAJ ODSTĘP OD TOPA W PIKSELACH // right: TUTAJ ODSTĘP OD PRAWEJ STRONY (oczywiście jeśli chcemy mieć logowanie po lewej stronie, right zmieniamy na left i podajemy odstęp od lewej strony).
Powyższe wartości podajemy na tzw. oko, aż się odpowiednio ustawi.


Pobierz wszystko z załącznika i wrzuć do templates/nazwastylu/images.

Bazowałem na stylu csBlue by patrykspec. Grafika z załącznika również pochodzi z tego stylu.

---

zaloguj.jpg

Plik ściągnięto 17309 raz(y) 29,08 KB

inputpassword.jpg

Plik ściągnięto 17309 raz(y) 24,9 KB

inputlogin.jpg

Plik ściągnięto 17309 raz(y) 24,58 KB

[ProGamer]

thx

[Mafi123pl]

Sorry za odkopa ale jak przerabiam subSilvera to nie mam <div'a>

[Webspy]

Mafi123pl, no to go dodaj..

[Mafi123pl]

<div id="logo"> i już ....

[Andzela]

Szkoda ze nie dziala, wyskakuje przy probie zalogowania info blad.

[Matteo]

Cytat:

Szkoda ze nie dziala, wyskakuje przy probie zalogowania info blad

Jaki błąd?

[Andzela]

Identyczny jak przy probie zmiany stylu na jakikolwiek z tych nowoczesnych, tutaj pisalam o tym bledzie:
http://www.przemo.org/php...ghlight,#719869
tez sie nie moglam zalogowac
Info:
Blad. i tyle
wiec ani nie moge zmienic stylu zadnego, bo wyskakuje ten blad z zalogowaniem, ani nie moge wgrac takiego ladnego panelu logowania.. bo tez jest problem z logowaniem.. wydaje mi sie ze to przez te modyfikacje dzielenie maila czy dodatkowe pole w profilu, itp. ale nie jestem pewna.
Dodam jeszcze, ze logowanie stare dzialalo bez problemu.

[PAvEL_Ciosek]

...

[WebnientyProroK]

Siema srry za ref

Ale gdy dodaje to

<!-- BEGIN switch_user_logged_out -->
<form method="post" action="{S_LOGIN_ACTION}">
<input type="text" name="username" size="20" maxlength="40" value="nick" class="login" style="border: 0px; padding-top:7px; padding-left:27px;" onBlur="if(this.value=='') this.value='nick';" onFocus="if(this.value=='nick') this.value='';" >

To cały panel mi znika a pozostaje tylko pasek do wprowadzenia loginu

[Dajaj]

<!-- BEGIN switch_user_logged_out -->

kończymy zawsze


<!-- END switch_user_logged_out -->

czyli w tym wypadku po

</form>

[Gadatliwa Kasia]

[WebnientyProroK]

Okej dzięki

I jeszcze jedno dlaczego zapomniałem hasła itp nie idzie w jednej linii tylko np

zapomniałem
hasła

Zarejestruj
się
teraz