Choose from our various pricing plans. There is a package for everyone!


How to add slide Log In panel

Page 2 of 2 Previous  1, 2

View previous topic View next topic Go down

Tutorial How to add slide Log In panel

Post by Th1nK on Wed Sep 05, 2012 4:48 pm

First topic message reminder :

Hello,
today I will show you how to add log in panel like here:
DEMO
You can download the files from HERE
BACKUP YOUR OVERALL_HEADER BEFORE START!
To install it in your forum, got to your templates and open overall_header
. Note:
If you want to be visible only for guests, paste the code betweeen
Code:
<!-- END switch_user_logged_out -->
tags.
STEP#1:
Here is the full code, just paste it and edit the links:
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">&nbsp;</li>
 </ul>
</div> <!-- / top -->
 
</div> <!--panel -->

Save and publish.
STEP#2
Add the CSS codes:
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;
}
AND:
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;
}
You wii see where to upload the images (Download the script from the site i give you)
Save.
STEP#3
Upload the images and replace them in the CSS Codes and change the links in the codes in overall_header.
If you have questions ask me!
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down


Tutorial Re: How to add slide Log In panel

Post by Th1nK on Mon Apr 29, 2013 6:48 pm

OK, can you please post your forum link to check it out?
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by ChauSy on Fri Jun 21, 2013 6:40 pm

So , for phpBB3 , i can't try this , right?
avatar
ChauSy
Member
Member

Age : 18
Posts : 20
Join date : 2013-06-17
Forum Version : PhpBB3
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by Th1nK on Sat Jun 22, 2013 7:48 am

ChauSy:
I think it will be difficult for phpbb3. You can try to paste the code in announcement or forum widget but I'm not shure if it work Smile.
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by unleashed on Thu Sep 05, 2013 11:51 am

can some one do code for phpbb3 please ?

Thanks waiting for ur response

Regards
avatar
unleashed
Member
Member

Age : 32
Posts : 22
Join date : 2013-08-24
Forum Version : PhpBB3
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by Th1nK on Fri Sep 06, 2013 1:09 pm

unleashed wrote:can some one do code for phpbb3 please ?

Thanks waiting for ur response

Regards
In phpbb3 you don't have templates so your only chance is to try to add it in Announcement or Forum widget.
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by Sponsored content


Sponsored content


Back to top Go down

Page 2 of 2 Previous  1, 2

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum