Jump to content
andrew

Jak dodać panel logowania na headerze

Recommended Posts

andrew

Pliki do otwarcia:

nazwa_stylu.css

overall_header.tpl
Dodatkowe: Najlepiej jakiś obrazek pod inputy i przycisk "loguj". 1. Otwieramy overall_header.tpl, znajdujemy:



Wyszukujemy teraz naszego diva z headerem, np. 
Między tymi znacznikami tworzymy nasz panel logowania, pamiętaj, aby twój div header miał dopisane w css "position:relative;"! 2. Dopisujemy dwie linijki:



3. Teraz otwieramy nazwa_stylu.css i robimy jakąś klasę, załóżmy:

.inputlogin {

font-family:Arial;

background-color:#d9d9d9;

width:120px;

height:29px;

position:absolute; top:35px; left:100px;

}
(jeżeli ktoś nie ogarnia tego kodu, to już lepiej niech teraz się za to nie zabiera, bo nic z tego nie wyjdzie). 4. Dodajemy w overall_header.tpl nową linijkę:





type="text" - odnosi się, co będzie tutaj wpisywane, tekst, liczby itp.

name="username" - odnosi się, co oznacza ten input, tutaj login.

maxlenght="40" - odnosi się, ile znaków maksymalnie może mieć login.

class="inputlogin" - odnosi się do naszej klasie w arkuszu stylów (css).

value="Enter login" - wartość, jaka wyświetla się przed kliknięciem w te pole.

style="font-size:9px; (...)" - to dalsza część tego, czego zapomnieliśmy, bądź nie chcieliśmy wpisać w css, odnosi się do ustawienia i wielkości tekstu (border:0; do ramki).



Reszta kodu odnosi się do wartości po kliknięciu i co ma zrobić, jeżeli ktoś nie wpisze loginu, będzie za długi, z niedozwolonymi znakami itp.



5. Dodajemy jeszcze jedną linijkę (tutaj posłużymy się również klasą "inputlogin", ja tak zawsze robię, chyba, że ktoś ma obrazkowe i przed tym jest np. tarcza, czy jakaś inna ikona).






Tutaj chyba nie muszę nic opisywać, bo kod jest bardzo podobny do poprzedniego.



6. Dodajemy kolejną linijkę, która będzie służyć nam za przycisk "loguj".








7. Przenieśmy się teraz do arkuszu stylów css.



Dodajemy nową klasę, np.:

.login {

background:url(images/login.png) no-repeat;

width:40px;

height:70px;

position:absolute; top:35px; left:225px;

}
Dodajemy jeszcze jedną klasę, posłuży nam ona za "lost password, rejestracja", np.:
.lostpwregister {

font-family:Arial;

font-size:9px;

position:absolute; top:110px; left:100px;

color:#ffffff;
Tutaj chyba nie muszę nic opisywać. 8. Przejdźmy do overall_header.tpl. Teraz dodamy opcje typu "zapomniałem hasła", "rejestracja", niech będzie jedno pod drugim. Dodajemy nową linijkę:

[/code]




9. Zamykamy wszystko kodem:

[code]
10. Teraz powinniśmy zrobić coś, żeby było po logowaniu; "Profil", "Nie masz wiadomości", "Wyloguj". Zaczynamy w nowej linijce po , skorzystamy z klasy lostpwregister. Dodajemy:

To wszystko, nie ma tu za dużo co opisywać, to tylko HTML, każdy z krztyną angielskiego się domyśli co to które, ale lepiej napiszę.

{U_PROFILE} i {L_PROFILE} odpowiadają za linijkę "Profil"

{U_PRIVATEMSGS} i {PRIVATE_MESSAGE_INFO} odpowiadają za ilość wiadomości np. "Nie masz żadnych wiadomości".

{U_LOGIN_LOGOUT} i {L_LOGIN_LOGOUT} odpowiadają za wylogowanie z profilu.

Wszystkie problemy zgłaszać w tym temacie, ale musi to być coś rozsądnego i poważnego, głupie kłopoty polegające na braku znajomości podstawowego HTML nie będą (przynajmniej przeze mnie) rozpatrywane.





			
		

Share this post


Link to post
Share on other sites
emiona1

Błąd występuje w 10punkcie danego poradnika.

Trzeba dodać jeszcze zamknięcie kodu

, ponieważ header w ten sposób przesuwa się pod forum.

Gotowy kod:


[/code]

Przepraszam za odkop, ale pomoże to komuś potem...

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
×
×
  • Create New...