Top subiecte apreciate

Optiuni experimentale
  • Foloseste AJAX in formulare ori de cate ori este posibil

Navigare rapidă

Ultimele subiecte
» Cum retusam imaginile
Scris de cristimare Astazi la 14:27
» Legenda s-a intors XD
Scris de EDGE Sam 24 Sept - 20:42
» salut
Scris de Andrei34 Dum 18 Sept - 18:53
» Salut
Scris de Andrei34 Dum 18 Sept - 18:52
Cuvinte-cheie

edit  drop  profil  subforumuri  radio  Bara  avatar  meniu  Statistici  html  punbb  tema  animate  subiecte  Mesaje  chenar  cautare  menu  phpBB2  ultimele  banner  Metin2  reclama  navigare  tutorial  legenda  

[All Version] Login Box


Buna Ziua,
Astazi ma gandit sa va arat cum puteti realiza un Login box pentru versiunea phpbb3.
Sa incepem.
Pasul 1. (JS)
ACP > Module > HTML & JAVASCRIPT > Gestiunea codurilor JavaScript > Creati un nou JavaScript
Title: Login Box
Amplsare: Toate Paginile
Cod JS:
Cod:
$(function() {
$('li:contains(Conectare)').replaceWith('<li><a class="mainmenu" id="login" href="#" rel="nofollow"><img id="i_icon_mini_login" src="http://illiweb.com/fa/empty.gif" border="0" hspace="2" alt="Log in" title="Log in">Conectare</a>  </li>');
$('head').append('<div id="panel"><div class="inner"><form action="/login.forum" method="post"><table cellspacing="1" cellpadding="3" border="0"><tbody><tr><td width="45%" align="right"> Username:</td><td><input type="text" name="username" size="25" maxlength="40" /></td></tr><tr><td align="right">Password:</td><td><input type="password" name="password" size="25" maxlength="32" /></td></tr><tr align="center"><td colspan="2">Log me on automatically each visit: <input type="checkbox" name="autologin" checked="true" /></td></tr><tr align="center"><td colspan="2"><input type="submit" class="mainoption" name="login" value="Log in" /></td></tr></tbody></table></form></div></div>'); $('#login').click(function(e) {
$('#panel').appendTo('li:contains(Conectare)', function(e) {
$('#panel').toggle(); });}); })
(windows);

Pasul 2.
ACP > Afisare > Imagini si Culori > Culori > Foaia de stil CSS
Cod:
#panel {
margin-left: 34%;
background: #E4EFF3;
width: 30%;
border: 1px double #2597CC;
color: #7AC;
padding: 5px;
border-radius: 3px;
}

#panel input {
padding: 3px 6px;
border: 1px solid #CCC;
background: #FCFCFC!important;
border-radius: 3px;
}

Enjoy.
Dovada :
1. (Inainte de click)
2. (Dupa click)

Tutorial relizat de InFeRn0.
Reproducerea acestui tutorial nu este posibila fara acordul nostru, in conformitate cu articolul L122-1 apartinand ICC.

Comentariile utilizatorilor

Fii primul care comenteaza acest articol