phpBB2 by Przemo
Support forów phpBB2 modified by Przemo

FAQFAQ - PIERWSZA POMOC!!  regulaminREGULAMIN  SzukajSZUKAJ  UżytkownicyUżytkownicy  GrupyGrupy  StatystykiStatystyki
RejestracjaRejestracja  ZalogujZaloguj  DownloadDownload  katalog Forów DyskusyjnychKatalog Forów   FAQ Video tutoriale

Poprzedni temat «» Następny temat
Przesunięty przez: Majkelo
21-02-2012, 19:35
[Problem] INDEX - Panel logowania w nagłówku
Autor Wiadomość
ProGamer


Pomógł: 1 raz
Posty: 63
Wysłany: 05-07-2011, 02:02   [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ł :)
Ostatnio zmieniony przez Majkelo 21-02-2012, 19:35, w całości zmieniany 2 razy  
 
     
Gadatliwa Kasia 

   
Majkelo



Pomógł: 1283 razy
Posty: 3081
Wysłany: 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.

zaloguj.jpg
Plik ściągnięto 16989 raz(y) 29,08 KB

inputpassword.jpg
Plik ściągnięto 16989 raz(y) 24,9 KB

inputlogin.jpg
Plik ściągnięto 16989 raz(y) 24,58 KB

Ostatnio zmieniony przez Majkelo 21-02-2012, 19:31, w całości zmieniany 2 razy  
 
     
ProGamer


Pomógł: 1 raz
Posty: 63
Wysłany: 11-11-2011, 14:09   

thx ;)
_________________
Mass siekiera :D [Boom] [Trop] :D
 
     
Mafi123pl

Posty: 7
Wysłany: 18-12-2011, 13:24   

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

Pomógł: 71 razy
Posty: 127
Wysłany: 18-12-2011, 13:26   

Mafi123pl, no to go dodaj..
_________________
safasfas
 
     
Mafi123pl

Posty: 7
Wysłany: 18-12-2011, 13:36   

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

Pomógł: 1 raz
Posty: 138
Wysłany: 21-02-2012, 19:56   

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



Pomógł: 1932 razy
Posty: 5715
Wysłany: 21-02-2012, 20:06   

Cytat:
Szkoda ze nie dziala, wyskakuje przy probie zalogowania info blad
Jaki błąd?
_________________
Fora, strony, sklepy internetowe i wiele więcej...
matteo.fcb(at)gmail.com
 
     
Andzela

Pomógł: 1 raz
Posty: 138
Wysłany: 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


Pomógł: 19 razy
Posty: 113
Wysłany: 25-06-2012, 14:17   

...
 
     
WebnientyProroK


Posty: 126
Wysłany: 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


Pomógł: 176 razy
Posty: 1019
Wysłany: 17-03-2013, 00:06   

<!-- BEGIN switch_user_logged_out -->

kończymy zawsze


<!-- END switch_user_logged_out -->

czyli w tym wypadku po

</form>
 
     
Gadatliwa Kasia 

   
WebnientyProroK


Posty: 126
Wysłany: 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
 
     
Wyświetl posty z ostatnich:   
Odpowiedz do tematu
Nie możesz pisać nowych tematów
Nie możesz odpowiadać w tematach
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Nie możesz załączać plików na tym forum
Możesz ściągać załączniki na tym forum
Dodaj temat do Ulubionych
Wersja do druku

Skocz do:  

Kopiowanie wszelkich treści zawartych na forum, modyfikacji oraz instrukcji bez zgody administracji i autorów tematów/postów zabronione!

Powered by phpBB modified by Przemo © 2003 phpBB
Strona wygenerowana w 0,13 sekundy. Zapytań do SQL: 18
Polecane serwisy

Najlepsze oprogramowanie do prowadzenia sklepu internetowegoNajlepszy program do sklepu firmowany przez Przem'a

Sklep z gadżetami

mediaclick.pl

serwis laptopów

phpbb

Polisy Ubezpieczeniowe TU Europa

Design Cart - Tworzenie sklepu internetowego

dnirozwoju.pl

Ranking Hostingów HostingOnline.pl

• Zamów reklamę