Login Top Slide bar
4 posters
Page 1 of 1
Login Top Slide bar
How Can I Add This Login Slide Bar In My Forum
Style Login This : http://www.xcodezz.com/h26-log-in-slide#
My Forum Is : http://saudatricks.forummotion.com
I Read This Topic From https://help.forumotion.com/t112818-black-slide-in-login-panel-on-forumotion?highlight=login
But The Tutorial Is For PunBB Any Help?
Style Login This : http://www.xcodezz.com/h26-log-in-slide#
My Forum Is : http://saudatricks.forummotion.com
I Read This Topic From https://help.forumotion.com/t112818-black-slide-in-login-panel-on-forumotion?highlight=login
But The Tutorial Is For PunBB Any Help?
Re: Login Top Slide bar
I think that type of login is only available to PunBB as I've seen multiple sliding log ins for PunBB.
This tutorial isn't exactly the same but its a close second.
http://www.avacweb.com/t59-5-lgforum-style-login
This tutorial isn't exactly the same but its a close second.
http://www.avacweb.com/t59-5-lgforum-style-login
Derri- Helper
- Posts : 8755
Reputation : 638
Language : English & Basic French
Location : Scotland, United Kingdom
Re: Login Top Slide bar
HTML CODE
This in your CSS
And create a javascript with this one :
HTML can be added in Announcements or anywhere.
- Code:
<div id="toppanel">
<div id="panel" style="display: none;">
<div class="content clearfix">
<div class="left">
<h1>Welcome to xCoDeZz</h1>
<h2>The Home of CSS, Wii, And PSP Codes</h2>
<p class="grey">Please Login or Register now! thank you</p>
<h2>Benefits of Registering?</h2>
<p class="grey">You will get unlimited access to the forums, You will get to see the codes section when ever you want, and you get to chat with other members, and our site is #1 for leaking codes</p>
</div>
<div class="left">
<center><h1>Login</h1></center>
<form class="c3" action="/login.forum" method="post">
<table class="c2" border="0" cellpadding="3" cellspacing="1">
<tbody>
<tr>
<td align="right" width="45%">Username:</td>
<td><input name="username" size="25" maxlength="40" class="c1" type="text"></td>
</tr>
<tr>
<td align="right">Password:</td>
<td><input name="password" size="25" maxlength="32" class="c1" type="password"></td>
</tr>
<tr align="center">
<td colspan="2">Log me on automatically each visit: <input name="autologin" checked="true" type="checkbox"></td>
</tr>
<tr align="center">
<td colspan="2"><input class="mainoption" name="login" value="Log in" type="submit"> <input name="redirect" type="hidden" value="/h1-redirect-page"></td>
</tr>
</tbody>
</table>
</form>
</div>
<div class="left right">
<form action="#" method="post">
<h1>Not a member yet? Register!</h1>
<div class="main-head"><div class="subtitle"></div></div><div class="main-content frm"><p class="frm-info"></p><dl><dt><label>Username : *</label></dt><dd><input type="text" id="username_reg" name="username" value="" size="25" maxlength="25"></dd></dl><dl><dt><label>E-mail address : *</label></dt><dd><input class="ltr" type="text" id="email" name="email" value="" size="25" maxlength="65"></dd></dl><dl><dt><label>Password : *</label></dt><dd><input class="left ltr" type="password" id="password_reg" name="password" value="" size="25" maxlength="25"><div id="cont_pwd"><div class="pwd_img" id="pwd_bad"></div><div class="pwd_img" id="pwd_middle"></div><div class="pwd_img" id="pwd_good"></div></div></dd></dl><dl class="frm-buttons"><dt> </dt><dd><input class="button2" type="submit" name="submit" value="Save"><input class="button2" type="reset" name="reset" value="Reset"></dd></dl></div></form>
</div>
</div>
</div> <!-- /login -->
<!-- The tab on top -->
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li>Hello Guest!</li>
<li class="sep">|</li>
<li id="toggle">
<a id="open" class="open" href="#" style="display: block;">Log In | Register</a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</li>
<li class="right"> </li>
</ul>
</div> <!-- / top -->
</div>
This in your CSS
- Code:
/*
Name: Sliding Login Panel with jQuery 1.3.2
Author: Jeremie Tisseau
Author URI: http://web-kreation.com/
Date: March 26, 2009
Version: 1.0
*/
/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfixe:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfixe {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfixe {height: 1%;}
.clearfixe {display: block;}
/* End hide from IE-mac */
.clearfixe {height: 1%;}
.clearfixe {display: block;}
/* Panel Tab/button */
.tab {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/tab_r.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/tab_m.png) repeat-x 0 0;
}
.tab ul.login li a {
color: #15ADFF;
}
.tab ul.login li a:hover {
color: white;
}
.tab .sep {color:#414141}
.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}
.tab a.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_close.png) no-repeat left -19px;}
/* sliding panel */
#toppanel {
left: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 999;
}
#panele {
width: 100%;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panele h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
}
#panele h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: white;
}
#panele p {
margin: 5px 0;
padding: 0;
}
#panele a {
text-decoration: none;
color: #15ADFF;
}
#panele a:hover {
color: white;
}
#panele a-lost-pwd {
display: block;
float: left;
}
#panele .contente {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panele .contente .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panele .contente .right {
border-right: 1px solid #333;
}
#panele .contente form {
margin: 0 0 10px 0;
}
#panele .contente label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panele .contente input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}
#panele .content input:focus.field {
background: #545454;
}
/* BUTTONS */
/* Login and Register buttons */
#panele .contente input.bt_login,
#panele .contente input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}
#panele .contente input.bt_login {
width: 74px;
background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_login.png) no-repeat 0 0;
}
#panele .contente input.bt_register {
width: 94px;
color: white;
background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_register.png) no-repeat 0 0;
}
#panele .lost-pwd {
display: block;
float:left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}
#fa_ticker_block {
height: 1px;
}
And create a javascript with this one :
- Code:
$(document).ready(function(){$("#open").click(function(){$("div#panele").slideDown("slow");});$("#close").click(function(){$("div#panele").slideUp("slow");});$("#toggle a").click(function(){$("#toggle a").toggle();});});
HTML can be added in Announcements or anywhere.
Re: Login Top Slide bar
I Read The tutorial already everything is same as you have directed me to do, But Is there Anything I am Missing?
You Can View My Forum And tell me: http://saudatricks.forummotion.com
You Can View My Forum And tell me: http://saudatricks.forummotion.com
Re: Login Top Slide bar
Had like that , is impossible to don't have the login bar .. also , you added the CSS and javascript ?
Re: Login Top Slide bar
It Is Showing But the thing Is Its Not Taking any action And Even when I am logged In It's Still login/Register, Why Is it So,
You can have a look at my forum
You can have a look at my forum
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum