The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Sliding logining panel for phpBB3

Page 1 of 2 1, 2  Next

View previous topic View next topic Go down

Solved Sliding logining panel for phpBB3

Post by Cesar on June 23rd 2013, 2:35 pm

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?




// bump


// bump2:!:


// bump 3:twisted:


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

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 on June 24th 2013, 3:59 pm

Bump! .... Help , please!




// bump..

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 on June 25th 2013, 4:48 pm

Bump!

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 on June 25th 2013, 6:04 pm

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

levy
Hyperactive

Male Posts : 2582
Reputation : 345
Language : Romanian, English
Location : criticize artwork, not people!

http://help.forumotion.com/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Cesar on June 25th 2013, 6:18 pm

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
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 on June 26th 2013, 6:28 pm

Bump.....

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 on June 28th 2013, 10:59 am

Oh , thank you all for nothingbwi

bump..


// bumping again

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 on June 30th 2013, 6:11 pm

Oh , c'mon ! Bump..pale

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 on June 30th 2013, 6:22 pm

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
Hyperactive

Male Posts : 2582
Reputation : 345
Language : Romanian, English
Location : criticize artwork, not people!

http://help.forumotion.com/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Cesar on June 30th 2013, 6:55 pm

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
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 on June 30th 2013, 6:56 pm

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

levy
Hyperactive

Male Posts : 2582
Reputation : 345
Language : Romanian, English
Location : criticize artwork, not people!

http://help.forumotion.com/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by luiz187 on June 30th 2013, 6:59 pm

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

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 on June 30th 2013, 7:01 pm

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
Hyperactive

Male Posts : 2582
Reputation : 345
Language : Romanian, English
Location : criticize artwork, not people!

http://help.forumotion.com/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by luiz187 on June 30th 2013, 7:02 pm

Thanks Smile

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 on June 30th 2013, 7:05 pm

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
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 on June 30th 2013, 7:10 pm

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
Hyperactive

Male Posts : 2582
Reputation : 345
Language : Romanian, English
Location : criticize artwork, not people!

http://help.forumotion.com/

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by luiz187 on June 30th 2013, 7:17 pm

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

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 on June 30th 2013, 7:19 pm

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 meEmbarassed

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 on June 30th 2013, 7:30 pm

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, 8:05 pm; edited 1 time in total

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 on July 2nd 2013, 12:07 pm

Bump..groar

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 on July 3rd 2013, 8:47 pm

Bump..beu

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 on July 5th 2013, 10:58 am

Bump..TT

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 on July 5th 2013, 11:18 am

http://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
ForumGuru

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

http://webartzforum.com

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Cesar on July 5th 2013, 11:25 am

So , just add the codes in Homepage message?

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 on July 5th 2013, 11:33 am

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

Sanket
ForumGuru

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

http://webartzforum.com

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Cesar on July 5th 2013, 11:51 am

It doesn't openmwii

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 on July 5th 2013, 11:57 am

Forum URL? Did you do all as mentioned?

Sanket
ForumGuru

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

http://webartzforum.com

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Cesar on July 5th 2013, 12:01 pm

Yep.

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

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 on July 5th 2013, 12:19 pm

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

Sanket
ForumGuru

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

http://webartzforum.com

Back to top Go down

Solved Re: Sliding logining panel for phpBB3

Post by Cesar on July 5th 2013, 12:22 pm

Uhm , ok...hh

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
Forumember

Posts : 207
Reputation : 3
Language : Romanian

http://www.wolffighterz.com/

Back to top Go down

Page 1 of 2 1, 2  Next

View previous topic View next topic Back to top


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