![[Code] Style Login User_l10](https://i.servimg.com/u/f55/18/73/81/56/user_l10.png)
Sign In
Create Account
CNTT-K3![[Code] Style Login SSHoNEq](https://i.imgur.com/sSHoNEq.png)
Mới làm trên Invision chưa biết 3 cái kia sao ai rảnh thì tét thử nhá
Display -> Colors -> CSS Stylesheet
Tạo Weight và bỏ scoure này vào
Tạo Javascrip Placment All
Tick : Phần Weight chỉnh hiện thị với Guest
![[Code] Style Login Captur11](https://i.servimg.com/u/f30/17/20/25/96/captur11.png)
Display -> Colors -> CSS Stylesheet
- Code:
#LGoverlay {
position: fixed;
top: 0px;
left: 0px;
min-height: 101%;
width: 100%;
background-color: #000;
opacity: 0.7;
filter:Alpha(opacity=70);
z-index: 999;
}
#LGlogin {
background: #EEE;
color: #777;
left: 25%;
position: fixed;
top: 30%;
width: 50%;
z-index: 999;
box-shadow: 10px 10px 40px black;
-moz-box-shadow: 10px 10px 40px black;
-webkit-box-shadow: 10px 10px 40px black;
font-family: sans-serif;
text-shadow: 0px 1px 1px white;
color: #666;
}
#LGlogin h1 {
background: #CCC;
margin-top: 0;
padding: 8px 10px;
text-align: left;
border-bottom: 1px solid #888;
}
#LGlogin form {
margin: 10px auto;
width: 90%;
}
#LGlogin img.closebutton {
float: right;
margin: 10px;
background: url('http://i45.servimg.com/u/f45/16/95/07/69/bt_clo10.png') no-repeat 0 -20px;
width: 20px;
height: 20px;
cursor: pointer;
}
#LGlogin img.closebutton:hover {background: url('http://i45.servimg.com/u/f45/16/95/07/69/bt_clo10.png') 0 0px;}
#LGlogin ul {
list-style-type: none;
}
#LGlogin ul li {
float: left;
width: 50%;
font-size: 1.2em;
}
#LGlogin li input {
padding: 4px;
background: #fff;
border: 1px solid #CCC;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#LGlogin .login-submit {
display: block;
margin: 15px auto;
background: #CCC;
border: 1px solid;
color: #666;
padding: 5px 10px;
font-weight: bold;
text-shadow: 0px 1px 1px #fff;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
cursor: pointer;
}
#LGlogin .login-submit:hover {
color: #AAA;
}
#LGloginbtn {
background: #CCC;
border: 1px solid;
color: #555;
font-weight: bold;
font-size: 1.4em;
padding: 10px 30px;
position: fixed;
right: 10px;
text-shadow: 0 1px 1px white;
top: 5px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
box-shadow: 4px 8px 25px #444;
-webkit-box-shadow: 4px 8px 25px #444;
-moz-box-shadow: 4px 8px 25px #444;
cursor: pointer;
}
#LGloginbtn:hover {
color: #888;
}
Tạo Weight và bỏ scoure này vào
- Code:
<div id="LGoverlay" onclick="LGlogin()" style="display:none"></div>
<div id="LGloginbtn" onclick="LGlogin();">Log In</div>
<div id="LGlogin" style="display:none">
<img src="http://2img.net/i/fa/empty.gif" class="closebutton" width="20px" height="20px" onclick="LGlogin();"/>
<h1>Log In</h1>
<form action="/login.forum" method="post">
<ul>
<li><label for="username">Username</label></li>
<li><input type="text" name="username" size="25" /></li>
<li><label for="password">Password</label></li>
<li><input type="password" name="password" size="25" /></li>
<li>Remember me?</li>
<li><input type="checkbox" name="autologin" checked="checked" /></li>
</ul>
<div style="clear:left"></div>
<input type="submit" class="login-submit" name="login" value="Log in" />
<input name="redirect" type="hidden" value="">
</form>
</div>
Tạo Javascrip Placment All
- Code:
function LGlogin() {
var x = document.getElementById('LGlogin');
if (x.style.display == 'none') {
jQuery(x).add('#LGoverlay').fadeIn('slow');
var r = x.getElementsByTagName('form')[0].redirect;
r.value = window.location.href;
}
else {
jQuery(x).add('#LGoverlay').fadeOut('slow');
}
}
jQuery(function(){ if(document.getElementById('logout')) document.getElementById('LGloginbtn').style.display = 'none'; });
Tick : Phần Weight chỉnh hiện thị với Guest
Write by LG
