1 [Code] Bảng đăng nhập hiệu ứng Trượt cực PRO Thu Nov 08, 2012 8:06 pm
Admin
Trùm Forum
[You must be registered and logged in to see this link.]
Bước 1 :
xóa hết Mod_login Chèn đoạn code này vào Mod_login :
Bước 3 : Chèn đoạn này vào css :
Bước 1 :
xóa hết Mod_login Chèn đoạn code này vào Mod_login :
- Code:
<!-- BEGIN switch_login_small -->
<div class="dangnhapvds">
<div class="module-tm">
<div class="module-tl">
<div class="module-tr">
<div class="cattitle" align="center"><b>KHUNG ĐĂNG NHẬP</b></div><hr />
<div class="topics">
<form class="vdslogin" action="{S_LOGIN_ACTION}" method="post">
<div style="float:left;"><span class="gen">Tài khoản:</span></div>
<div style="float:right;position:relative;padding-right:1px;"><input type="text" name="username" value="{USERNAME}" size="10" maxlength="30" style="width:100px;" /></div>
<div class="clear"></div>
<div style="float:left;"><span class="gen">Mật khẩu:</span></div>
<div style="float:right;position:relative;padding-right:1px;"><input type="password" name="password" size="10" maxlength="50" style="width:100px;" /></div>
<div class="clear"></div>
<div align="center">
<span class="gen">Đăng nhập tự động: <input type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></span><br />
<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /><br />
<span class="gensmall"><a class="gensmall" href="{U_SEND_PASSWORD}" rel="nofollow">:: {L_SEND_PASSWORD}</a></span>
</div>
</form>
</div></div></div></div>
</div>
<!-- END switch_login_small -->
<!-- BEGIN switch_profile -->
<div class="thongtinthanhvienvds">
<div class="module-tm">
<div class="module-tl">
<div class="module-tr">
<div class="cattitle" align="center"><b>THÔNG TIN THÀNH VIÊN</b></div>
<hr />
<div class="topics">
<div class="cattitle" align="center"><b>{USERNAME}</b></div>
<hr />
<span class="genmed">» {L_MESSAGES} : <strong>{NB_MESSAGES}</strong></span><br />
<span class="genmed">» {L_PM} : <strong>{NB_PM_UNREAD} / {NB_PM_READ}</strong></span>
<hr />
<span class="genmed">• <a href="{U_PROFILE}">Lý lịch của tôi</a></span><br />
<span class="genmed">• <a href="/profile?mode=editprofile&page_profil=preferences">Tùy chỉnh giao diện</a></span><br />
<span class="genmed">• <a href="/profile?mode=editprofile&page_profil=signature">Thay đổi chữ ký</a></span><br />
<span class="genmed">• <a href="/profile?mode=editprofile&page_profil=avatars">Thay đổi Avatar</a></span><br />
<span class="genmed">• <a href="/profile?mode=editprofile&page_profil=friendsfoes">Danh sách: Bạn / Thù</a></span>
<hr />
<span class="genmed">Avatar</span><br />
<div class="avatarvds" align="center">{USERNAME_AVATAR}</div>
</div></div></div></div>
</div>
<!-- END switch_profile -->
Bước 3 : Chèn đoạn này vào css :
- Code:
#header-overlay {
background: url("http://i48.servimg.com/u/f48/13/58/60/43/header10.png") 0 0 repeat-x;
height: 109px;
}
#mainbody-overlay {
background: url("http://i48.servimg.com/u/f48/13/58/60/43/overla14.png") 50% 0 no-repeat;
}
.top-surround {
background: url("http://i48.servimg.com/u/f48/13/58/60/43/horizm10.png") 50% 0 no-repeat;
}
.ngancachtopic {
background: url("http://i48.servimg.com/u/f48/13/58/60/43/module10.png") 50% 0 no-repeat;
padding-top: 10px;
margin-top: 10px;
}
.news-bar {
background: url("http://i48.servimg.com/u/f48/13/58/60/43/newsfl10.png") 50% 0 no-repeat;
overflow: hidden;
margin: 0 50px;
position: relative;
line-height: 48px;
height: 50px;
font-size: 14px;
}
.control-prev {
background-image: url("http://i48.servimg.com/u/f48/13/58/60/43/newsfl11.png");
background-position: 0 0;
margin-left: 70px;
margin-top: 13px;
cursor: pointer;
height: 21px;
width: 20px;
float: left;
}
.control-next {
background-image: url("http://i48.servimg.com/u/f48/13/58/60/43/newsfl11.png");
background-position: 0 -21px;
margin-right: 70px;
margin-top: 13px;
cursor: pointer;
height: 21px;
width: 20px;
float: right;
}
.control-prev:hover {background-position: 0 -42px;}
.control-next:hover {background-position: 0 -63px;}
.maincontent-tm {
background: url("http://i48.servimg.com/u/f48/13/58/60/43/mainco10.png") 0 0 repeat-x;
margin: 0 12px;
}
.maincontent-tl {
background: url("http://i48.servimg.com/u/f48/13/58/60/43/mainco11.png") 0 0 no-repeat;
margin-left: -12px;
}
.maincontent-tr {
background: url("http://i48.servimg.com/u/f48/13/58/60/43/mainco12.png") 100% 0 no-repeat;
margin-right: -12px;
height: 20px;
}
.maincontent-m{
background: url("http://i48.servimg.com/u/f48/13/58/60/43/mainco13.png") 0 0;
margin: 0 12px;
}
.maincontent-l {
background: url("http://i48.servimg.com/u/f48/13/58/60/43/mainco14.png") 0 0 repeat-y;
margin-left: -12px;
}
.maincontent-r {
background: url("http://i48.servimg.com/u/f48/13/58/60/43/mainco15.png") 100% 0 repeat-y;
margin-right: -12px;
padding: 0 12px;
}
.maincontent-surround {
background: url("http://i48.servimg.com/u/f48/13/58/60/43/mainco16.png") 0 0 repeat-x;
padding: 5px;
}
.maincontent-bm {
background: url("http://i48.servimg.com/u/f48/13/58/60/43/mainco17.png") 0 0 repeat-x;
margin: 0 12px;
}
.maincontent-bl {
background: url("http://i48.servimg.com/u/f48/13/58/60/43/mainco18.png") 0 0 no-repeat;
margin-left: -12px;
}
.maincontent-br {
background: url("http://i48.servimg.com/u/f48/13/58/60/43/mainco19.png") 100% 0 no-repeat;
margin-right: -12px;
height: 12px;
}
.module-tl {
background: url("http://i48.servimg.com/u/f48/13/58/60/43/sidemo10.png") 0 0 no-repeat;
margin-left: -10px;
}
.module-tr {
background: url("http://i48.servimg.com/u/f48/13/58/60/43/sidemo11.png") 100% 0 no-repeat;
margin-right: -10px;
padding: 10px;
}
.module-tm {
background: url("http://i48.servimg.com/u/f48/13/58/60/43/sidemo12.png") 0 0 repeat-x;
clear: left;
margin: 0 10px;
}
.module {
background: url("http://i48.servimg.com/u/f48/13/58/60/43/sidemo13.png") 0 0;
padding: 3px;
overflow: hidden;
}
.dangnhapvds {
z-index: 999;
position: fixed;
width:200px;
height:170px;
left:5px;
bottom:-125px;
transition: all 3s ease; -webkit-transition: all 3s ease; -moz-transition: all 3s ease;
transition-delay: 3s; -webkit-transition-delay: 3s; -moz-transition-delay: 3s;
}
.dangnhapvds:hover {
bottom:0;
transition: all 1s cubic-bezier(1,0.1,0.1,1); -webkit-transition: all 1s cubic-bezier(1,0.1,0.1,1); -moz-transition: all 1s cubic-bezier(1,0.1,0.1,1);
}
.thongtinthanhvienvds {
z-index: 999;
position: fixed;
width:200px;
height:450px;
left: 5px;
bottom:-405px;
transition: all 3s cubic-bezier(0,1,0.1,0.8); -webkit-transition: all 3s cubic-bezier(0,1,0.1,0.8); -moz-transition: all 3s cubic-bezier(0,1,0.1,0.8);
}
.thongtinthanhvienvds:hover {
bottom:0;
transition: all 1s cubic-bezier(1,0.1,0.1,1); -webkit-transition: all 1s cubic-bezier(1,0.1,0.1,1); -moz-transition: all 1s cubic-bezier(1,0.1,0.1,1);
}