To jest tylko wersja do druku, aby zobaczyć pełną wersję tematu, kliknij TUTAJ
phpBB2 by Przemo
Support forów phpBB2 modified by Przemo

F.A.Q. - style i grafika - [Problem] INDEX - Panel logowania w nagłówku

ProGamer - 05-07-2011, 02:02
Temat postu: [Problem] INDEX - Panel logowania w nagłówku
Siema

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

Majkelo - 05-07-2011, 08:50

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.

ProGamer - 11-11-2011, 14:09

thx ;)
Mafi123pl - 18-12-2011, 13:24

Sorry za odkopa ale jak przerabiam subSilvera to nie mam <div'a>
Webspy - 18-12-2011, 13:26

Mafi123pl, no to go dodaj..
Mafi123pl - 18-12-2011, 13:36

<div id="logo"> i już ....
Andzela - 21-02-2012, 19:56

Szkoda ze nie dziala, wyskakuje przy probie zalogowania info blad.
Matteo - 21-02-2012, 20:06

Cytat:
Szkoda ze nie dziala, wyskakuje przy probie zalogowania info blad
Jaki błąd?
Andzela - 21-02-2012, 20:18

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 - 25-06-2012, 14:17

...
WebnientyProroK - 16-03-2013, 22:25

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 - 17-03-2013, 00:06

<!-- BEGIN switch_user_logged_out -->

kończymy zawsze


<!-- END switch_user_logged_out -->

czyli w tym wypadku po

</form>

WebnientyProroK - 17-03-2013, 08:55

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



Powered by phpBB modified by Przemo © 2003 phpBB Group