Sliding logining panel for phpBB3
+2
levy
Cesar
6 posters
Page 1 of 2
Page 1 of 2 • 1, 2
Sliding logining panel for phpBB3
 Hello everyone!I'm trying to input on my forum a slide Log In panel for BB3 , but the code work's only with BB2 and punBB.
 I search on forum , but i find only topic's that "finished" moved to Garbage or locked - no solution to this problem.
  Here is a link to the demo of the slide log in panel.If you need the codes , there they are:
 This code ~> overall_header
- Code:
<<div id="toppanel">
 <div id="panel">
   <div class="content clearfix">
    <div class="left">
      <h1>Welcome to Web-Kreation</h1>
      <h2>Sliding login panel Demo with jQuery</h2>   Â
      <p class="grey">You can put anything you want in this sliding panel: videos, audio, images, forms... The only limit is your imagination!</p>
      <h2>Download</h2>
      <p class="grey">To download this script go back to <a href="http/web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery" title="Download">article »</a></p>
    </div>
    <div class="left">
      <!-- Login Form -->
      <form class="clearfix" action="#" method="post">
       <h1>Member Login</h1>
       <label class="grey" for="log">Username:</label>
       <input class="field" type="text" name="log" id="log" value="" size="23" />
       <label class="grey" for="pwd">Password:</label>
       <input class="field" type="password" name="pwd" id="pwd" size="23" />
         <label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" />  Remember me</label>
        <div class="clear"></div>
       <input type="submit" name="submit" value="Login" class="bt_login" />
       <a class="lost-pwd" href="#">Lost your password?</a>
      </form>
    </div>
    <div class="left right">    Â
      <!-- Register Form -->
      <form action="#" method="post">
       <h1>Not a member yet? Sign Up!</h1>      Â
       <label class="grey" for="signup">Username:</label>
       <input class="field" type="text" name="signup" id="signup" value="" size="23" />
       <label class="grey" for="email">Email:</label>
       <input class="field" type="text" name="email" id="email" size="23" />
       <label>A password will be e-mailed to you.</label>
       <input type="submit" name="submit" value="Register" class="bt_register" />
      </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="#">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> <!--panel -->
- 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
 Copyright 2009 Jeremie Tisseau
 "Sliding Login Panel with jQuery 1.3.2" is distributed under the GNU General Public License version 3:
 http/www.gnu.org/licenses/gpl-3.0.html
*/
/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}
/* Panel Tab/button */
.tab {
  background: url(../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(../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(../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(../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(../images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(../images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(../images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(../images/bt_close.png) no-repeat left -19px;}
/* sliding panel */
#toppanel {
  position: absolute;  /*Panel will overlap  content */
  /*position: relative;*/  /*Panel will "push" the content down */
  top: 0;
  width: 100%;
  z-index: 999;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
#panel {
 width: 100%;
 height: 270px;
 color: #999999;
 background: #272727;
 overflow: hidden;
 position: relative;
 z-index: 3;
 display: none;
}
#panel h1 {
 font-size: 1.6em;
 padding: 5px 0 10px;
 margin: 0;
 color: white;
}
#panel h2{
 font-size: 1.2em;
 padding: 10px 0 5px;
 margin: 0;
 color: white;
}
#panel p {
 margin: 5px 0;
 padding: 0;
}
#panel a {
 text-decoration: none;
 color: #15ADFF;
}
#panel a:hover {
 color: white;
}
#panel a-lost-pwd {
 display: block;
 float: left;
}
#panel .content {
 width: 960px;
 margin: 0 auto;
 padding-top: 15px;
 text-align: left;
 font-size: 0.85em;
}
#panel .content .left {
 width: 280px;
 float: left;
 padding: 0 15px;
 border-left: 1px solid #333;
}
#panel .content .right {
 border-right: 1px solid #333;
}
#panel .content form {
 margin: 0 0 10px 0;
}
#panel .content label {
 float: left;
 padding-top: 8px;
 clear: both;
 width: 280px;
 display: block;
}
#panel .content input.field {
 border: 1px #1A1A1A solid;
 background: #414141;
 margin-right: 5px;
 margin-top: 4px;
 width: 200px;
 color: white;
 height: 16px;
}
#panel .content input:focus.field {
 background: #545454;
}
/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
 display: block;
 float: left;
 clear: left;
 height: 24px;
 text-align: center;
 cursor: pointer;
 border: none;
 font-weight: bold;
 margin: 10px 0;
}
#panel .content input.bt_login {
 width: 74px;
 background: transparent url(../images/bt_login.png) no-repeat 0 0;
}
#panel .content input.bt_register {
 width: 94px;
 color: white;
 background: transparent url(../images/bt_register.png) no-repeat 0 0;
}
#panel .lost-pwd {
 display: block;
 float:left;
 clear: right;
 padding: 15px 5px 0;
 font-size: 0.95em;
 text-decoration: underline;
}
- Code:
/*
Name: Sliding Login Panel with jQuery 1.3.2
Author: Jeremie Tisseau
Author URI: http/web-kreation.com/
Script URI: http/web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/
Date: March 26, 2009
Version: 1.0
 Copyright 2009 Jeremie Tisseau
 "Sliding Login Panel with jQuery 1.3.2" is distributed under the GNU General Public License version 3:
 http/www.gnu.org/licenses/gpl-3.0.html
*/ Â Â
html, body {border: 0; margin: 0; padding: 0;}
body {
  font: 85%/0.9 arial, helvetica, sans-serif;
 background: #99A989 url(../images/bg.jpg) repeat 0 0;
  line-height: 130%;
  width: 100%;
  min-width: 970px;
  color: black;
}
a {
 color: #0099CC;
 text-decoration: none;
}
a:hover {
 color: #00CCFF;
}
a img {
 border: none;/*remove border for linked images*/
}
h1 {
 font-size: 1.6em;
 height: 20px;
 padding-top: 0;
}
h2{
 font-size: 1.2em;
 height: 20px;
 padding-top: 0;
}
.highlight {background-color:#FF9D9D;border-bottom:#F30 1px solid;border-top:#F30 1px solid;padding: 4px 10px}
/***** Main Layout ****/
#container {
  width: 100%;
  height: 100%;
  text-align: center;/* IE fix to center the page */
}
#content {
  width: 740px;
  margin: 0 auto;/* center the page in Firefox */
  text-align: left;
 padding: 20px;
}
I've tryed to put them into Description or Announcements , but didn't work.Any other solutions , please?
// bump
// bump2:!:
// bump 3:twisted:
Last edited by PixX on July 9th 2013, 17:04; edited 4 times in total
Re: Sliding logining panel for phpBB3
Hello , try this one , that is fixed for forumotion : http://www.avacweb.com/t59-5-lgforum-style-login and is very nice.
Re: Sliding logining panel for phpBB3
candy_fear wrote:Hello , try this one , that is fixed for forumotion : http://www.avacweb.com/t59-5-lgforum-style-login and is very nice.
I apreciate that you tryed to help me , but i want that , not LGforum style login..
I want the slide login that i gived to you to be "converted" for BB3:grat:
Re: Sliding logining panel for phpBB3
Create a new widget and add this code :
It's tested by me without the javascript and look ok , only the background is hide , add your own ,probably you know
- Code:
<style>
/*
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
Copyright 2009 Jeremie Tisseau
"Sliding Login Panel with jQuery 1.3.2" is distributed under the GNU General Public License version 3:
http/www.gnu.org/licenses/gpl-3.0.html
*/
/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}
/* Panel Tab/button */
.tab {
background: url(../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(../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(../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(../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(../images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(../images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(../images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(../images/bt_close.png) no-repeat left -19px;}
/* sliding panel */
#toppanel {
position: absolute; /*Panel will overlap content */
/*position: relative;*/ /*Panel will "push" the content down */
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 270px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
}
#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: white;
}
#panel p {
margin: 5px 0;
padding: 0;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel a-lost-pwd {
display: block;
float: left;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .content .right {
border-right: 1px solid #333;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}
#panel .content input:focus.field {
background: #545454;
}
/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}
#panel .content input.bt_login {
width: 74px;
background: transparent url(../images/bt_login.png) no-repeat 0 0;
}
#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(../images/bt_register.png) no-repeat 0 0;
}
#panel .lost-pwd {
display: block;
float:left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}
/*
Name: Sliding Login Panel with jQuery 1.3.2
Author: Jeremie Tisseau
Author URI: http/web-kreation.com/
Script URI: http/web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/
Date: March 26, 2009
Version: 1.0
Copyright 2009 Jeremie Tisseau
"Sliding Login Panel with jQuery 1.3.2" is distributed under the GNU General Public License version 3:
http/www.gnu.org/licenses/gpl-3.0.html
*/
html, body {border: 0; margin: 0; padding: 0;}
body {
font: 85%/0.9 arial, helvetica, sans-serif;
background: #99A989 url(../images/bg.jpg) repeat 0 0;
line-height: 130%;
width: 100%;
min-width: 970px;
color: black;
}
a {
color: #0099CC;
text-decoration: none;
}
a:hover {
color: #00CCFF;
}
a img {
border: none;/*remove border for linked images*/
}
h1 {
font-size: 1.6em;
height: 20px;
padding-top: 0;
}
h2{
font-size: 1.2em;
height: 20px;
padding-top: 0;
}
.highlight {background-color:#FF9D9D;border-bottom:#F30 1px solid;border-top:#F30 1px solid;padding: 4px 10px}
/***** Main Layout ****/
#container {
width: 100%;
height: 100%;
text-align: center;/* IE fix to center the page */
}
#content {
width: 740px;
margin: 0 auto;/* center the page in Firefox */
text-align: left;
padding: 20px;
}
</style>
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
<h1>Welcome to Web-Kreation</h1>
<h2>Sliding login panel Demo with jQuery</h2>
<p class="grey">You can put anything you want in this sliding panel: videos, audio, images, forms... The only limit is your imagination!</p>
<h2>Download</h2>
<p class="grey">To download this script go back to <a href="http/web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery" title="Download">article »</a></p>
</div>
<div class="left">
<!-- Login Form -->
<form class="clearfix" action="#" method="post">
<h1>Member Login</h1>
<label class="grey" for="log">Username:</label>
<input class="field" type="text" name="log" id="log" value="" size="23" />
<label class="grey" for="pwd">Password:</label>
<input class="field" type="password" name="pwd" id="pwd" size="23" />
<label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>
<div class="clear"></div>
<input type="submit" name="submit" value="Login" class="bt_login" />
<a class="lost-pwd" href="#">Lost your password?</a>
</form>
</div>
<div class="left right">
<!-- Register Form -->
<form action="#" method="post">
<h1>Not a member yet? Sign Up!</h1>
<label class="grey" for="signup">Username:</label>
<input class="field" type="text" name="signup" id="signup" value="" size="23" />
<label class="grey" for="email">Email:</label>
<input class="field" type="text" name="email" id="email" size="23" />
<label>A password will be e-mailed to you.</label>
<input type="submit" name="submit" value="Register" class="bt_register" />
</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="#">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> <!--panel -->
It's tested by me without the javascript and look ok , only the background is hide , add your own ,probably you know
Re: Sliding logining panel for phpBB3
candy_fear wrote:Create a new widget and add this code :
- Code:
<style>
/*
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
Copyright 2009 Jeremie Tisseau
"Sliding Login Panel with jQuery 1.3.2" is distributed under the GNU General Public License version 3:
http/www.gnu.org/licenses/gpl-3.0.html
*/
/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}
/* Panel Tab/button */
.tab {
background: url(../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(../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(../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(../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(../images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(../images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(../images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(../images/bt_close.png) no-repeat left -19px;}
/* sliding panel */
#toppanel {
position: absolute; /*Panel will overlap content */
/*position: relative;*/ /*Panel will "push" the content down */
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 270px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
}
#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: white;
}
#panel p {
margin: 5px 0;
padding: 0;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel a-lost-pwd {
display: block;
float: left;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .content .right {
border-right: 1px solid #333;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}
#panel .content input:focus.field {
background: #545454;
}
/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}
#panel .content input.bt_login {
width: 74px;
background: transparent url(../images/bt_login.png) no-repeat 0 0;
}
#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(../images/bt_register.png) no-repeat 0 0;
}
#panel .lost-pwd {
display: block;
float:left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}
/*
Name: Sliding Login Panel with jQuery 1.3.2
Author: Jeremie Tisseau
Author URI: http/web-kreation.com/
Script URI: http/web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/
Date: March 26, 2009
Version: 1.0
Copyright 2009 Jeremie Tisseau
"Sliding Login Panel with jQuery 1.3.2" is distributed under the GNU General Public License version 3:
http/www.gnu.org/licenses/gpl-3.0.html
*/
html, body {border: 0; margin: 0; padding: 0;}
body {
font: 85%/0.9 arial, helvetica, sans-serif;
background: #99A989 url(../images/bg.jpg) repeat 0 0;
line-height: 130%;
width: 100%;
min-width: 970px;
color: black;
}
a {
color: #0099CC;
text-decoration: none;
}
a:hover {
color: #00CCFF;
}
a img {
border: none;/*remove border for linked images*/
}
h1 {
font-size: 1.6em;
height: 20px;
padding-top: 0;
}
h2{
font-size: 1.2em;
height: 20px;
padding-top: 0;
}
.highlight {background-color:#FF9D9D;border-bottom:#F30 1px solid;border-top:#F30 1px solid;padding: 4px 10px}
/***** Main Layout ****/
#container {
width: 100%;
height: 100%;
text-align: center;/* IE fix to center the page */
}
#content {
width: 740px;
margin: 0 auto;/* center the page in Firefox */
text-align: left;
padding: 20px;
}
</style>
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
<h1>Welcome to Web-Kreation</h1>
<h2>Sliding login panel Demo with jQuery</h2>
<p class="grey">You can put anything you want in this sliding panel: videos, audio, images, forms... The only limit is your imagination!</p>
<h2>Download</h2>
<p class="grey">To download this script go back to <a href="http/web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery" title="Download">article »</a></p>
</div>
<div class="left">
<!-- Login Form -->
<form class="clearfix" action="#" method="post">
<h1>Member Login</h1>
<label class="grey" for="log">Username:</label>
<input class="field" type="text" name="log" id="log" value="" size="23" />
<label class="grey" for="pwd">Password:</label>
<input class="field" type="password" name="pwd" id="pwd" size="23" />
<label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>
<div class="clear"></div>
<input type="submit" name="submit" value="Login" class="bt_login" />
<a class="lost-pwd" href="#">Lost your password?</a>
</form>
</div>
<div class="left right">
<!-- Register Form -->
<form action="#" method="post">
<h1>Not a member yet? Sign Up!</h1>
<label class="grey" for="signup">Username:</label>
<input class="field" type="text" name="signup" id="signup" value="" size="23" />
<label class="grey" for="email">Email:</label>
<input class="field" type="text" name="email" id="email" size="23" />
<label>A password will be e-mailed to you.</label>
<input type="submit" name="submit" value="Register" class="bt_register" />
</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="#">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> <!--panel -->
It's tested by me without the javascript and look ok , only the background is hide , add your own ,probably you know
So , i just put that code in a new widget and done?No other code?
Re: Sliding logining panel for phpBB3
And javascript from tutorial...
And yes , but that will make to see and the members.
And yes , but that will make to see and the members.
Re: Sliding logining panel for phpBB3
I wanted the same thing and...how do i put that in a widget. Sorry.
Re: Sliding logining panel for phpBB3
Off : Administration -> Module -> Forum Widget Management -> Display forum widgets -> Yes
Create a new widget.
On : here is the javascript
Create a new widget.
On : here is the javascript
- Code:
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
Re: Sliding logining panel for phpBB3
Doesn't work. I added the JS that you gaved me into the Javascript Management and the widget code , but nothing. Just f***ed up my forum.
Re: Sliding logining panel for phpBB3
- Code:
<style>
/*
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
Copyright 2009 Jeremie Tisseau
"Sliding Login Panel with jQuery 1.3.2" is distributed under the GNU General Public License version 3:
http/www.gnu.org/licenses/gpl-3.0.html
*/
/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}
/* Panel Tab/button */
.tab {
background: url(../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(../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(../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(../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(../images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(../images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(../images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(../images/bt_close.png) no-repeat left -19px;}
/* sliding panel */
#toppanel {
position: absolute; /*Panel will overlap content */
/*position: relative;*/ /*Panel will "push" the content down */
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
left:0px
}
#panel {
width: 100%;
height: 270px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
}
#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: white;
}
#panel p {
margin: 5px 0;
padding: 0;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel a-lost-pwd {
display: block;
float: left;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .content .right {
border-right: 1px solid #333;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}
#panel .content input:focus.field {
background: #545454;
}
/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}
#panel .content input.bt_login {
width: 74px;
background: transparent url(../images/bt_login.png) no-repeat 0 0;
}
#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(../images/bt_register.png) no-repeat 0 0;
}
#panel .lost-pwd {
display: block;
float:left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}
</style>
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
<h1>Welcome to Web-Kreation</h1>
<h2>Sliding login panel Demo with jQuery</h2>
<p class="grey">You can put anything you want in this sliding panel: videos, audio, images, forms... The only limit is your imagination!</p>
<h2>Download</h2>
<p class="grey">To download this script go back to <a href="http/web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery" title="Download">article »</a></p>
</div>
<div class="left">
<!-- Login Form -->
<form class="clearfix" action="#" method="post">
<h1>Member Login</h1>
<label class="grey" for="log">Username:</label>
<input class="field" type="text" name="log" id="log" value="" size="23" />
<label class="grey" for="pwd">Password:</label>
<input class="field" type="password" name="pwd" id="pwd" size="23" />
<label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>
<div class="clear"></div>
<input type="submit" name="submit" value="Login" class="bt_login" />
<a class="lost-pwd" href="#">Lost your password?</a>
</form>
</div>
<div class="left right">
<!-- Register Form -->
<form action="#" method="post">
<h1>Not a member yet? Sign Up!</h1>
<label class="grey" for="signup">Username:</label>
<input class="field" type="text" name="signup" id="signup" value="" size="23" />
<label class="grey" for="email">Email:</label>
<input class="field" type="text" name="email" id="email" size="23" />
<label>A password will be e-mailed to you.</label>
<input type="submit" name="submit" value="Register" class="bt_register" />
</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="#">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> <!--panel -->
Try now and add the background , probably know , if not, I add for you.
Re: Sliding logining panel for phpBB3
Where is the widget code please explain to the newbie. I'm still learning how to use forumotion
Re: Sliding logining panel for phpBB3
candy_fear wrote:
- Code:
<style>
/*
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
Copyright 2009 Jeremie Tisseau
"Sliding Login Panel with jQuery 1.3.2" is distributed under the GNU General Public License version 3:
http/www.gnu.org/licenses/gpl-3.0.html
*/
/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}
/* Panel Tab/button */
.tab {
background: url(../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(../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(../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(../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(../images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(../images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(../images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(../images/bt_close.png) no-repeat left -19px;}
/* sliding panel */
#toppanel {
position: absolute; /*Panel will overlap content */
/*position: relative;*/ /*Panel will "push" the content down */
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
left:0px
}
#panel {
width: 100%;
height: 270px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
}
#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: white;
}
#panel p {
margin: 5px 0;
padding: 0;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel a-lost-pwd {
display: block;
float: left;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .content .right {
border-right: 1px solid #333;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}
#panel .content input:focus.field {
background: #545454;
}
/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}
#panel .content input.bt_login {
width: 74px;
background: transparent url(../images/bt_login.png) no-repeat 0 0;
}
#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(../images/bt_register.png) no-repeat 0 0;
}
#panel .lost-pwd {
display: block;
float:left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}
</style>
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
<h1>Welcome to Web-Kreation</h1>
<h2>Sliding login panel Demo with jQuery</h2>
<p class="grey">You can put anything you want in this sliding panel: videos, audio, images, forms... The only limit is your imagination!</p>
<h2>Download</h2>
<p class="grey">To download this script go back to <a href="http/web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery" title="Download">article »</a></p>
</div>
<div class="left">
<!-- Login Form -->
<form class="clearfix" action="#" method="post">
<h1>Member Login</h1>
<label class="grey" for="log">Username:</label>
<input class="field" type="text" name="log" id="log" value="" size="23" />
<label class="grey" for="pwd">Password:</label>
<input class="field" type="password" name="pwd" id="pwd" size="23" />
<label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>
<div class="clear"></div>
<input type="submit" name="submit" value="Login" class="bt_login" />
<a class="lost-pwd" href="#">Lost your password?</a>
</form>
</div>
<div class="left right">
<!-- Register Form -->
<form action="#" method="post">
<h1>Not a member yet? Sign Up!</h1>
<label class="grey" for="signup">Username:</label>
<input class="field" type="text" name="signup" id="signup" value="" size="23" />
<label class="grey" for="email">Email:</label>
<input class="field" type="text" name="email" id="email" size="23" />
<label>A password will be e-mailed to you.</label>
<input type="submit" name="submit" value="Register" class="bt_register" />
</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="#">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> <!--panel -->
Try now and add the background , probably know , if not, I add for you.
Hmm , where to add the bg?Please , can you add it for me
Re: Sliding logining panel for phpBB3
I'm lost to. I can't find where to put half of the thing and have it work
Last edited by luiz187 on July 2nd 2013, 21:05; edited 1 time in total
Re: Sliding logining panel for phpBB3
https://help.forumotion.com/t112818-black-slide-in-login-panel-on-forumotion#738865
The code that is mentioned to go into templates, add it to your homepage message.
The code that is mentioned to go into templates, add it to your homepage message.
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Re: Sliding logining panel for phpBB3
Only the one that is mentioned to go into the templates.
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Re: Sliding logining panel for phpBB3
Forum URL? Did you do all as mentioned?
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Re: Sliding logining panel for phpBB3
Please post the codes you added & where. I will try those codes later tonight or tomorrow.
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Re: Sliding logining panel for phpBB3
Uhm , ok...
This one , in Homepage message:
This in CSS:
And this , in Javascript Management:
This one , in Homepage message:
- Code:
<!-- Login --><div id="toppanel">[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<div id="panel">[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<div class="content clearfix">[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<div class="left">[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<h1>Welcome to xCoDeZz</h1>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<h2>The Home of CSS, Wii, And PSP Codes</h2> [color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<p class="grey">Please Login or Register now! thank you</p>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<h2>Benefits of Registering?</h2>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<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>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
</div>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<div class="left">[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<center><h1>Login</h1></center>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<form class="c3" action="/login.forum" method="post">[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<table class="c2" border="0" cellpadding="3" cellspacing="1">[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<tbody>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<tr>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<td align="right" width="45%">Username:</td>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<td><input name="username" size="25" maxlength="40" class="c1" type="text"></td>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
</tr>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<tr>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<td align="right">Password:</td>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<td><input name="password" size="25" maxlength="32" class="c1" type="password"></td>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
</tr>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<tr align="center">[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<td colspan="2">Log me on automatically each visit: <input name="autologin" checked="true" type="checkbox"></td>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
</tr>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<tr align="center">[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<td colspan="2"><input class="mainoption" name="login" value="Log in" type="submit"> <input name="redirect" type="hidden" value="/h1-redirect-page"></td>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
</tr>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
</tbody>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
</table>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
</form>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
</div>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<div class="left right">[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<form action="#" method="post">[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<h1>Not a member yet? Register!</h1> [color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<br> [color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<center><a href="/Register">Click here to Register now!</a></center>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<center> You will be Redirected to the Login Page</center>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
</form>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
</div>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
</div>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
</div> <!-- /login --> [color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<!-- The tab on top --> [color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<div class="tab">[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<ul class="login">[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<li class="left"> </li>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<li>Hello Guest!</li>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<li class="sep">|</li>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<li id="toggle">[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<a id="open" class="open" href="#">Log In | Register</a>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<a id="close" style="display: none;" class="close" href="#">Close Panel</a> [color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
</li>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
<li class="right"> </li>[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
</ul> [color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
</div> <!-- / top -->[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
</div> <!--panel -->
This in CSS:
- Code:
/*[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
Name: Sliding Login Panel with jQuery 1.3.2[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
Author: Jeremie Tisseau[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
Author URI: http://web-kreation.com/[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
Date: March 26, 2009[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
Version: 1.0[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
*/[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
/***** clearfix *****/[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
.clear {clear: both;height: 0;line-height: 0;}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
.clearfix {display: inline-block;}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
/* Hides from IE-mac \*/[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
* html .clearfix {height: 1%;}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
.clearfix {display: block;}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
/* End hide from IE-mac */[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
.clearfix {height: 1%;}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
.clearfix {display: block;}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
/* Panel Tab/button */[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
.tab {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/tab_b.png) repeat-x 0 0;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
height: 42px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
position: relative;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
top: 0;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
z-index: 999;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
.tab ul.login {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
display: block;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
position: relative;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
float: right;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
clear: right;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
height: 42px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
width: auto;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
font-weight: bold;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
line-height: 42px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
margin: 0;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
right: 150px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
color: white;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
font-size: 80%;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
text-align: center;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
.tab ul.login li.left {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/tab_l.png) no-repeat left 0;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
height: 42px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
width: 30px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
padding: 0;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
margin: 0;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
display: block;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
float: left;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
.tab ul.login li.right {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/tab_r.png) no-repeat left 0;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
height: 42px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
width: 30px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
padding: 0;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
margin: 0;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
display: block;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
float: left;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
.tab ul.login li {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
text-align: left;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
padding: 0 6px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
display: block;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
float: left;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
height: 42px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/tab_m.png) repeat-x 0 0;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
.tab ul.login li a {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
color: #15ADFF;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
.tab ul.login li a:hover {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
color: white;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
.tab .sep {color:#414141}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
.tab a.open, .tab a.close {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
height: 20px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
line-height: 20px !important;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
padding-left: 30px !important;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
cursor: pointer;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
display: block;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
width: 100px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
position: relative;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
top: 11px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
.tab a.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_open.png) no-repeat left 0;}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
.tab a.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_close.png) no-repeat left 0;}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
.tab a:hover.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_open.png) no-repeat left -19px;}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
.tab a:hover.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_close.png) no-repeat left -19px;}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
/* sliding panel */[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
#toppanel {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
position: absolute;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
top: 0;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
width: 100%;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
z-index: 999;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
text-align: center;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
margin-left: auto;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
margin-right: auto;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
#panel {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
width: 100%;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
height: 270px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
color: #999999;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
background: #272727;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
overflow: hidden;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
position: relative;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
z-index: 3;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
display: none;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
#panel h1 {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
font-size: 1.6em;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
padding: 5px 0 10px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
margin: 0;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
color: white;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
#panel h2{[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
font-size: 1.2em;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
padding: 10px 0 5px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
margin: 0;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
color: white;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
#panel p {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
margin: 5px 0;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
padding: 0;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
#panel a {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
text-decoration: none;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
color: #15ADFF;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
#panel a:hover {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
color: white;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
#panel a-lost-pwd {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
display: block;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
float: left;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
#panel .content {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
width: 960px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
margin: 0 auto;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
padding-top: 15px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
text-align: left;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
font-size: 0.85em;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
#panel .content .left {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
width: 280px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
float: left;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
padding: 0 15px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
border-left: 1px solid #333;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
#panel .content .right {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
border-right: 1px solid #333;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
#panel .content form {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
margin: 0 0 10px 0;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
#panel .content label {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
float: left;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
padding-top: 8px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
clear: both;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
width: 280px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
display: block;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
#panel .content input.field {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
border: 1px #1A1A1A solid;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
background: #414141;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
margin-right: 5px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
margin-top: 4px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
width: 200px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
color: white;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
height: 16px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
#panel .content input:focus.field {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
background: #545454;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
/* BUTTONS */[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
/* Login and Register buttons */[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
#panel .content input.bt_login,[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
#panel .content input.bt_register {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
display: block;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
float: left;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
clear: left;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
height: 24px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
text-align: center;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
cursor: pointer;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
border: none;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
font-weight: bold;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
margin: 10px 0;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
#panel .content input.bt_login {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
width: 74px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_login.png) no-repeat 0 0;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
#panel .content input.bt_register {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
width: 94px;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
color: white;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_register.png) no-repeat 0 0;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
#panel .lost-pwd {[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
display: block;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
float:left;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
clear: right;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
padding: 15px 5px 0;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
font-size: 0.95em;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
text-decoration: underline;[color=#2e8b57][font=Courier, CourierNew, sans-serif][/font][/color]
}
And this , in Javascript Management:
- Code:
$(document).ready(function(){$("#open").click(function(){$("div#panel").slideDown("slow");});$("#close").click(function(){$("div#panel").slideUp("slow");});$("#toggle a").click(function(){$("#toggle a").toggle();});});
Page 1 of 2 • 1, 2
Similar topics
» sliding log in panel
» Sliding Log-in Panel
» Forum widgets management > Sliding Panel
» How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3 (Need Help)
» Sliding panel problem
» Sliding Log-in Panel
» Forum widgets management > Sliding Panel
» How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3 (Need Help)
» Sliding panel problem
Page 1 of 2
Permissions in this forum:
You cannot reply to topics in this forum