The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Sliding logining panel for phpBB3

+2
levy
Cesar
6 posters

Page 1 of 2 1, 2  Next

Go down

Solved Sliding logining panel for phpBB3

Post by Cesar June 23rd 2013, 15:35

Hello
 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 -->
This codes ~> 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
 Â  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?Sliding logining panel for phpBB3  Mouais




// bump


// bump2:!:


// bump 3:twisted:


Last edited by PixX on July 9th 2013, 17:04; edited 4 times in total
Cesar
Cesar
Forumember

Posts : 207
Reputation : 3
Language : Romanian

http://www.wolffighterz.com/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Cesar June 24th 2013, 16:59

Bump!  .... Help , please!




// bump..
Cesar
Cesar
Forumember

Posts : 207
Reputation : 3
Language : Romanian

http://www.wolffighterz.com/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Cesar June 25th 2013, 17:48

Bump!
Cesar
Cesar
Forumember

Posts : 207
Reputation : 3
Language : Romanian

http://www.wolffighterz.com/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by levy June 25th 2013, 19:04

Hello , try this one , that is fixed for forumotion : http://www.avacweb.com/t59-5-lgforum-style-login and is very nice.
levy
levy
Hyperactive

Male Posts : 2632
Reputation : 350
Language : English, Romanian
Location : Romania

https://portofolio.goodforum.net/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Cesar June 25th 2013, 19:18

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:
Cesar
Cesar
Forumember

Posts : 207
Reputation : 3
Language : Romanian

http://www.wolffighterz.com/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Cesar June 26th 2013, 19:28

Bump.....
Cesar
Cesar
Forumember

Posts : 207
Reputation : 3
Language : Romanian

http://www.wolffighterz.com/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Cesar June 28th 2013, 11:59

Oh , thank you all for nothing bwi

 bump..


 // bumping again Sliding logining panel for phpBB3  Whistle
Cesar
Cesar
Forumember

Posts : 207
Reputation : 3
Language : Romanian

http://www.wolffighterz.com/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Cesar June 30th 2013, 19:11

Oh , c'mon ! Bump..pale
Cesar
Cesar
Forumember

Posts : 207
Reputation : 3
Language : Romanian

http://www.wolffighterz.com/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by levy June 30th 2013, 19:22

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 Smile
levy
levy
Hyperactive

Male Posts : 2632
Reputation : 350
Language : English, Romanian
Location : Romania

https://portofolio.goodforum.net/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Cesar June 30th 2013, 19:55

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 Smile

 
  So , i just put that code in a new widget and done?No other code?
Cesar
Cesar
Forumember

Posts : 207
Reputation : 3
Language : Romanian

http://www.wolffighterz.com/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by levy June 30th 2013, 19:56

And javascript from tutorial...
And yes , but that will make to see and the members.
levy
levy
Hyperactive

Male Posts : 2632
Reputation : 350
Language : English, Romanian
Location : Romania

https://portofolio.goodforum.net/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by luiz187 June 30th 2013, 19:59

I wanted the same thing and...how do i put that in a widget. Sorry.
luiz187
luiz187
Forumember

Male Posts : 183
Reputation : 3
Language : English and Portuguese and some Spanish
Location : ISS

http://everyonesblog.net

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by levy June 30th 2013, 20:01

Off : Administration -> Module -> Forum Widget Management -> Display forum widgets -> Yes

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();
   });      
      
levy
levy
Hyperactive

Male Posts : 2632
Reputation : 350
Language : English, Romanian
Location : Romania

https://portofolio.goodforum.net/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by luiz187 June 30th 2013, 20:02

Thanks Smile
luiz187
luiz187
Forumember

Male Posts : 183
Reputation : 3
Language : English and Portuguese and some Spanish
Location : ISS

http://everyonesblog.net

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Cesar June 30th 2013, 20:05

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.
Cesar
Cesar
Forumember

Posts : 207
Reputation : 3
Language : Romanian

http://www.wolffighterz.com/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by levy June 30th 2013, 20:10

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.
levy
levy
Hyperactive

Male Posts : 2632
Reputation : 350
Language : English, Romanian
Location : Romania

https://portofolio.goodforum.net/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by luiz187 June 30th 2013, 20:17

Where is the widget code please explain to the newbie. I'm still learning how to use forumotion
luiz187
luiz187
Forumember

Male Posts : 183
Reputation : 3
Language : English and Portuguese and some Spanish
Location : ISS

http://everyonesblog.net

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Cesar June 30th 2013, 20:19

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 Embarassed
Cesar
Cesar
Forumember

Posts : 207
Reputation : 3
Language : Romanian

http://www.wolffighterz.com/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by luiz187 June 30th 2013, 20:30

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
luiz187
luiz187
Forumember

Male Posts : 183
Reputation : 3
Language : English and Portuguese and some Spanish
Location : ISS

http://everyonesblog.net

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Cesar July 2nd 2013, 13:07

Bump..groar
Cesar
Cesar
Forumember

Posts : 207
Reputation : 3
Language : Romanian

http://www.wolffighterz.com/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Cesar July 3rd 2013, 21:47

Bump..beu
Cesar
Cesar
Forumember

Posts : 207
Reputation : 3
Language : Romanian

http://www.wolffighterz.com/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Cesar July 5th 2013, 11:58

Bump..TT
Cesar
Cesar
Forumember

Posts : 207
Reputation : 3
Language : Romanian

http://www.wolffighterz.com/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Sanket July 5th 2013, 12:18

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.
Sanket
Sanket
ForumGuru

Male Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Cesar July 5th 2013, 12:25

So , just add the codes in Homepage message?
Cesar
Cesar
Forumember

Posts : 207
Reputation : 3
Language : Romanian

http://www.wolffighterz.com/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Sanket July 5th 2013, 12:33

Only the one that is mentioned to go into the templates.
Sanket
Sanket
ForumGuru

Male Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Cesar July 5th 2013, 12:51

It doesn't open mwii
Cesar
Cesar
Forumember

Posts : 207
Reputation : 3
Language : Romanian

http://www.wolffighterz.com/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Sanket July 5th 2013, 12:57

Forum URL? Did you do all as mentioned?
Sanket
Sanket
ForumGuru

Male Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Cesar July 5th 2013, 13:01

Yep.

 I don't think you gonna understand something , but :
 http://lemakdesign.forum.st/
Cesar
Cesar
Forumember

Posts : 207
Reputation : 3
Language : Romanian

http://www.wolffighterz.com/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Sanket July 5th 2013, 13:19

Please post the codes you added & where. I will try those codes later tonight or tomorrow.
Sanket
Sanket
ForumGuru

Male Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Cesar July 5th 2013, 13:22

Uhm , ok...héhé 

  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();});});
Cesar
Cesar
Forumember

Posts : 207
Reputation : 3
Language : Romanian

http://www.wolffighterz.com/

Back to top Go down

Page 1 of 2 1, 2  Next

Back to top

- Similar topics

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