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.

Ugly Loading Webpage Problem

View previous topic View next topic Go down

Solved Ugly Loading Webpage Problem

Post by KazmoK on September 24th 2012, 7:35 am

Hi there,
http://www.csshelp.net/t718-how-to-add-slide-log-in-panel

I followed that tutorial for my website:
http://ingenmarket.forummotions.com/

I have followed this exact tutorial,
but I have two problems


How do I link my Log In / Register button?

and

when im loading my page, i usually get this image, is there a way to get rid of it?

KazmoK
New Member

Posts : 13
Reputation : 1
Language : English

Back to top Go down

Solved Re: Ugly Loading Webpage Problem

Post by levy on September 24th 2012, 10:24 am

If you want to HTML Page ,this is

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

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: Ugly Loading Webpage Problem

Post by DarkGlow on September 24th 2012, 11:54 am

@KazmoK wrote:Hi there,
http://www.csshelp.net/t718-how-to-add-slide-log-in-panel

I followed that tutorial for my website:
http://ingenmarket.forummotions.com/

I have followed this exact tutorial,
but I have two problems


How do I link my Log In / Register button?

and

when im loading my page, i usually get this image, is there a way to get rid of it?

So you're saying that loading page happens/comes due to the sliding login panel you used? If so, there must be errors with the codes you used. I can give you mine if you wish.

DarkGlow
Forumember

Male Posts : 629
Reputation : 92
Language : English | Hebrew | Arabic
Location : Israel

Back to top Go down

Solved Re: Ugly Loading Webpage Problem

Post by KazmoK on September 24th 2012, 2:42 pm

@DarkGlow wrote:
@KazmoK wrote:Hi there,
http://www.csshelp.net/t718-how-to-add-slide-log-in-panel

I followed that tutorial for my website:
http://ingenmarket.forummotions.com/

I have followed this exact tutorial,
but I have two problems


How do I link my Log In / Register button?

and

when im loading my page, i usually get this image, is there a way to get rid of it?

So you're saying that loading page happens/comes due to the sliding login panel you used? If so, there must be errors with the codes you used. I can give you mine if you wish.



ya that would be great thank you so much

KazmoK
New Member

Posts : 13
Reputation : 1
Language : English

Back to top Go down

Solved Re: Ugly Loading Webpage Problem

Post by DarkGlow on September 24th 2012, 3:03 pm

The first step I want you to do is to remove/delete all of the codes you used from that site on your forum.

About the template editing, you can quickly click at the red X icon to restore it back to default, instead of searching in the template to remove it.

DarkGlow
Forumember

Male Posts : 629
Reputation : 92
Language : English | Hebrew | Arabic
Location : Israel

Back to top Go down

Solved Re: Ugly Loading Webpage Problem

Post by KazmoK on September 24th 2012, 6:58 pm

@DarkGlow wrote:The first step I want you to do is to remove/delete all of the codes you used from that site on your forum.

About the template editing, you can quickly click at the red X icon to restore it back to default, instead of searching in the template to remove it.


done

KazmoK
New Member

Posts : 13
Reputation : 1
Language : English

Back to top Go down

Solved Re: Ugly Loading Webpage Problem

Post by DarkGlow on September 24th 2012, 9:23 pm

Hello again,

Ok so, do this smoothly. Since you're using punBB, it would be easier.

Your first step is to add the following code into your templates (ACP > Advanced mode > Display tab > Scroll to bottom till Templates > General > overall_header). Locate ''<body>'' then add it right after it (use the search):

Code:
  <!-- BEGIN switch_user_logged_out -->
      <!-- Login --><div id="toppanel">
  <div id="panel">
      <div class="content clearfix">
        <div class="left">
            <h1>Welcome to Our Official Website!</h1>
            <h2>The Home of..........</h2>     
            <p class="grey">Please login or register now! Thank you!</p>
            <h2>Benefits of Registering?</h2>
            <p class="grey">SIMPLE EXPLANATION ON THE BENEFITS OF REGISTERING.</p>
        </div>
        <div class="left">
            <center><h1>Login</h1></center>
<form class="c3" action="/login.forum" method="post">
<table class="c2" border="0" cellpadding="3" cellspacing="1">
<tbody>
<tr>
<td align="right" width="45%">Username:</td>
<td><input name="username" size="25" maxlength="40" class="c1" type="text"></td>
</tr>
<tr>
<td align="right">Password:</td>
<td><input name="password" size="25" maxlength="32" class="c1" type="password"></td>
</tr>
<tr align="center">
<td colspan="2">Log me on automatically each visit: <input name="autologin" checked="true" type="checkbox"></td>
</tr>
<tr align="center">
<td colspan="2"><input class="mainoption" name="login" value="Log in" type="submit"> <input name="redirect" type="hidden" value="/h1-redirect-page"></td>
</tr>
</tbody>
</table>
</form>
        </div>
        <div class="left right">
            <form action="#" method="post">
              <h1>Not a member yet? Register!</h1> 
<br>       
              <center><a href="/register">Click here to Register now!</a></center>
                                    <center> You will be Redirected to the Login Page</center>

            </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 -->
          <!-- END switch_user_logged_out -->

{NOTE}: You can locate something in the lines of:

SIMPLE EXPLANATION ON THE BENEFITS OF REGISTERING

And few lines above it like this:

The Home of.........

You have to adjust those to your liking. Wink


Your next step is to add the following code into your CSS (Display tab > Colors > CSS Stylesheet mini-tab):

Code:
/*
Name: Sliding Login Panel with jQuery 1.3.2
Author: Jeremie Tisseau
Author URI: http://web-kreation.com/
Date: March 26, 2009
Version: 1.0
*/

/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: 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(http://i49.tinypic.com/19bg4o.png) repeat-x 0 0;
  height: 42px;
  position: relative;
    top: 0;
    z-index: 999;
}

.tab ul.login {
  display: block;
  position: relative;
    float: right;
    clear: right;
    height: 42px;
  width: auto;
    font-weight: bold;
  line-height: 42px;
  margin: 0;
  right: 150px;
    color: white;
    font-size: 80%;
  text-align: center;
}

.tab ul.login li.left {
    background: url(http://i50.tinypic.com/2llk56p.png) no-repeat left 0;
    height: 42px;
  width: 30px;
  padding: 0;
  margin: 0;
    display: block;
  float: left;
}

.tab ul.login li.right {
    background: url(http://i49.tinypic.com/35j9t84.png) no-repeat left 0;
    height: 42px;
  width: 30px;
  padding: 0;
  margin: 0;
    display: block;
  float: left;
}

.tab ul.login li {
    text-align: left;
    padding: 0 6px;
  display: block;
  float: left;
  height: 42px;
    background: url(http://i47.tinypic.com/ip8g2f.png) repeat-x 0 0;
}

.tab ul.login li a {
  color: #15ADFF;
}

.tab ul.login li a:hover {
  color: white;
}

.tab .sep {color:#414141}

.tab a.open, .tab a.close {
  height: 20px;
  line-height: 20px !important;
  padding-left: 30px !important;
  cursor: pointer;
  display: block;
  width: 100px;
  position: relative;
  top: 11px;
}

.tab a.open {background: url(http://i48.tinypic.com/30w3w5z.png) no-repeat left 0;}
.tab a.close {background: url(http://i47.tinypic.com/2nlw7z4.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://i48.tinypic.com/30w3w5z.jpg) no-repeat left -19px;}
.tab a:hover.close {background: url(http://i47.tinypic.com/2nlw7z4.jpg) no-repeat left -19px;}

/* sliding panel */
#toppanel {
    position: absolute;
    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(http://i49.tinypic.com/bh9g2.png) no-repeat 0 0;
}

#panel .content input.bt_register {
  width: 94px;
  color: white;
  background: transparent url(http://i47.tinypic.com/23r0okn.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;
}


Your final step is to go to JavaScript codes management (found in Modules tab at the bottom) & do as following:

1. Enable JavaScript > save.

2. Create a new javascript.

3. Title: Login slider.

4. Placement: In all the pages.

5. Add the code into ''JavaScript Code'':

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

That's all. Good luck! It will only be visible for guests of course. Wink

DarkGlow
Forumember

Male Posts : 629
Reputation : 92
Language : English | Hebrew | Arabic
Location : Israel

Back to top Go down

Solved Re: Ugly Loading Webpage Problem

Post by KazmoK on September 25th 2012, 12:14 am

@DarkGlow wrote:Hello again,

Ok so, do this smoothly. Since you're using punBB, it would be easier.

Your first step is to add the following code into your templates (ACP > Advanced mode > Display tab > Scroll to bottom till Templates > General > overall_header). Locate ''<body>'' then add it right after it (use the search):

Code:
  <!-- BEGIN switch_user_logged_out -->
      <!-- Login --><div id="toppanel">
  <div id="panel">
      <div class="content clearfix">
        <div class="left">
            <h1>Welcome to Our Official Website!</h1>
            <h2>The Home of..........</h2>     
            <p class="grey">Please login or register now! Thank you!</p>
            <h2>Benefits of Registering?</h2>
            <p class="grey">SIMPLE EXPLANATION ON THE BENEFITS OF REGISTERING.</p>
        </div>
        <div class="left">
            <center><h1>Login</h1></center>
<form class="c3" action="/login.forum" method="post">
<table class="c2" border="0" cellpadding="3" cellspacing="1">
<tbody>
<tr>
<td align="right" width="45%">Username:</td>
<td><input name="username" size="25" maxlength="40" class="c1" type="text"></td>
</tr>
<tr>
<td align="right">Password:</td>
<td><input name="password" size="25" maxlength="32" class="c1" type="password"></td>
</tr>
<tr align="center">
<td colspan="2">Log me on automatically each visit: <input name="autologin" checked="true" type="checkbox"></td>
</tr>
<tr align="center">
<td colspan="2"><input class="mainoption" name="login" value="Log in" type="submit"> <input name="redirect" type="hidden" value="/h1-redirect-page"></td>
</tr>
</tbody>
</table>
</form>
        </div>
        <div class="left right">
            <form action="#" method="post">
              <h1>Not a member yet? Register!</h1> 
<br>       
              <center><a href="/register">Click here to Register now!</a></center>
                                    <center> You will be Redirected to the Login Page</center>

            </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 -->
          <!-- END switch_user_logged_out -->

{NOTE}: You can locate something in the lines of:

SIMPLE EXPLANATION ON THE BENEFITS OF REGISTERING

And few lines above it like this:

The Home of.........

You have to adjust those to your liking. Wink


Your next step is to add the following code into your CSS (Display tab > Colors > CSS Stylesheet mini-tab):

Code:
/*
Name: Sliding Login Panel with jQuery 1.3.2
Author: Jeremie Tisseau
Author URI: http://web-kreation.com/
Date: March 26, 2009
Version: 1.0
*/

/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: 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(http://i49.tinypic.com/19bg4o.png) repeat-x 0 0;
  height: 42px;
  position: relative;
    top: 0;
    z-index: 999;
}

.tab ul.login {
  display: block;
  position: relative;
    float: right;
    clear: right;
    height: 42px;
  width: auto;
    font-weight: bold;
  line-height: 42px;
  margin: 0;
  right: 150px;
    color: white;
    font-size: 80%;
  text-align: center;
}

.tab ul.login li.left {
    background: url(http://i50.tinypic.com/2llk56p.png) no-repeat left 0;
    height: 42px;
  width: 30px;
  padding: 0;
  margin: 0;
    display: block;
  float: left;
}

.tab ul.login li.right {
    background: url(http://i49.tinypic.com/35j9t84.png) no-repeat left 0;
    height: 42px;
  width: 30px;
  padding: 0;
  margin: 0;
    display: block;
  float: left;
}

.tab ul.login li {
    text-align: left;
    padding: 0 6px;
  display: block;
  float: left;
  height: 42px;
    background: url(http://i47.tinypic.com/ip8g2f.png) repeat-x 0 0;
}

.tab ul.login li a {
  color: #15ADFF;
}

.tab ul.login li a:hover {
  color: white;
}

.tab .sep {color:#414141}

.tab a.open, .tab a.close {
  height: 20px;
  line-height: 20px !important;
  padding-left: 30px !important;
  cursor: pointer;
  display: block;
  width: 100px;
  position: relative;
  top: 11px;
}

.tab a.open {background: url(http://i48.tinypic.com/30w3w5z.png) no-repeat left 0;}
.tab a.close {background: url(http://i47.tinypic.com/2nlw7z4.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://i48.tinypic.com/30w3w5z.jpg) no-repeat left -19px;}
.tab a:hover.close {background: url(http://i47.tinypic.com/2nlw7z4.jpg) no-repeat left -19px;}

/* sliding panel */
#toppanel {
    position: absolute;
    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(http://i49.tinypic.com/bh9g2.png) no-repeat 0 0;
}

#panel .content input.bt_register {
  width: 94px;
  color: white;
  background: transparent url(http://i47.tinypic.com/23r0okn.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;
}


Your final step is to go to JavaScript codes management (found in Modules tab at the bottom) & do as following:

1. Enable JavaScript > save.

2. Create a new javascript.

3. Title: Login slider.

4. Placement: In all the pages.

5. Add the code into ''JavaScript Code'':

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

That's all. Good luck! It will only be visible for guests of course. Wink




and IIIIIIIIIIIIIIIIIIIIIIIIIIIIII EIIIIIIIIIII
WILL ALWAYS LOVE
UUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU

KazmoK
New Member

Posts : 13
Reputation : 1
Language : English

Back to top Go down

View previous topic View next topic Back to top


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