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

Login Top Slide bar

4 posters

Go down

Login Top Slide bar  Empty Login Top Slide bar

Post by Arsalan3d July 9th 2013, 2:20 pm

How Can I Add This Login Slide Bar In My Forum 

 Style Login This : http://www.xcodezz.com/h26-log-in-slide#

 My Forum Is : http://saudatricks.forummotion.com

I Read This Topic From https://help.forumotion.com/t112818-black-slide-in-login-panel-on-forumotion?highlight=login
But The Tutorial Is For PunBB Any Help?
Arsalan3d
Arsalan3d
Forumember

Male Posts : 55
Reputation : 1
Language : English, Hindi
Location : India

http://saudatricks.forummotion.com

Back to top Go down

Login Top Slide bar  Empty Re: Login Top Slide bar

Post by Derri July 9th 2013, 2:22 pm

I think that type of login is only available to PunBB as I've seen multiple sliding log ins for PunBB.

This tutorial isn't exactly the same but its a close second.

http://www.avacweb.com/t59-5-lgforum-style-login
Derri
Derri
Helper
Helper

Male Posts : 8755
Reputation : 638
Language : English & Basic French
Location : Scotland, United Kingdom

Back to top Go down

Login Top Slide bar  Empty Re: Login Top Slide bar

Post by levy July 9th 2013, 2:27 pm

HTML CODE
Code:
<div id="toppanel">
   <div id="panel" style="display: none;">
      <div class="content clearfix">
         <div class="left">
            <h1>Welcome to xCoDeZz</h1>
            <h2>The Home of CSS, Wii, And PSP Codes</h2>      
            <p class="grey">Please Login or Register now! thank you</p>
            <h2>Benefits of Registering?</h2>
            <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>
         </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>   
        <div class="main-head"><div class="subtitle"></div></div><div class="main-content frm"><p class="frm-info"></p><dl><dt><label>Username : *</label></dt><dd><input type="text" id="username_reg" name="username" value="" size="25" maxlength="25"></dd></dl><dl><dt><label>E-mail address : *</label></dt><dd><input class="ltr" type="text" id="email" name="email" value="" size="25" maxlength="65"></dd></dl><dl><dt><label>Password : *</label></dt><dd><input class="left ltr" type="password" id="password_reg" name="password" value="" size="25" maxlength="25"><div id="cont_pwd"><div class="pwd_img" id="pwd_bad"></div><div class="pwd_img" id="pwd_middle"></div><div class="pwd_img" id="pwd_good"></div></div></dd></dl><dl class="frm-buttons"><dt> </dt><dd><input class="button2" type="submit" name="submit" value="Save"><input class="button2" type="reset" name="reset" value="Reset"></dd></dl></div></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="#" style="display: block;">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>

This in your 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
    */

    /***** clearfix *****/
    .clear {clear: both;height: 0;line-height: 0;}
    .clearfixe:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
    .clearfixe {display: inline-block;}
    /* Hides from IE-mac \*/
    * html .clearfixe {height: 1%;}
    .clearfixe {display: block;}
    /* End hide from IE-mac */
    .clearfixe {height: 1%;}
    .clearfixe {display: block;}

    /* Panel Tab/button */
    .tab {
        background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//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(http://web-kreation.com/demos/Sliding_login_panel_jquery//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(http://web-kreation.com/demos/Sliding_login_panel_jquery//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(http://web-kreation.com/demos/Sliding_login_panel_jquery//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(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_open.png) no-repeat left 0;}
    .tab a.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_close.png) no-repeat left 0;}
    .tab a:hover.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_open.png) no-repeat left -19px;}
    .tab a:hover.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_close.png) no-repeat left -19px;}

    /* sliding panel */

#toppanel {
    left: 0;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 999;
}

    #panele {
      width: 100%;
      color: #999999;
      background: #272727;
      overflow: hidden;
      position: relative;
      z-index: 3;
      display: none;
    }

    #panele h1 {
      font-size: 1.6em;
      padding: 5px 0 10px;
      margin: 0;
      color: white;
    }

    #panele h2{
      font-size: 1.2em;
      padding: 10px 0 5px;
      margin: 0;
      color: white;
    }

    #panele p {
      margin: 5px 0;
      padding: 0;
    }

    #panele a {
      text-decoration: none;
      color: #15ADFF;
    }

    #panele a:hover {
      color: white;
    }

    #panele a-lost-pwd {
      display: block;
      float: left;
    }

    #panele .contente {
      width: 960px;
      margin: 0 auto;
      padding-top: 15px;
      text-align: left;
      font-size: 0.85em;
    }

    #panele .contente .left {
      width: 280px;
      float: left;
      padding: 0 15px;
      border-left: 1px solid #333;
    }

    #panele .contente .right {
      border-right: 1px solid #333;
    }

    #panele .contente form {
      margin: 0 0 10px 0;
    }

    #panele .contente label {
      float: left;
      padding-top: 8px;
      clear: both;
      width: 280px;
      display: block;
    }

    #panele .contente input.field {
      border: 1px #1A1A1A solid;
      background: #414141;
      margin-right: 5px;
      margin-top: 4px;
      width: 200px;
      color: white;
      height: 16px;
    }

    #panele .content input:focus.field {
      background: #545454;
    }

    /* BUTTONS */
    /* Login and Register buttons */
    #panele .contente input.bt_login,
    #panele .contente input.bt_register {
      display: block;
      float: left;
      clear: left;
      height: 24px;
      text-align: center;
      cursor: pointer;
      border: none;
      font-weight: bold;
      margin: 10px 0;
    }

    #panele .contente input.bt_login {
      width: 74px;
      background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_login.png) no-repeat 0 0;
    }

    #panele .contente input.bt_register {
      width: 94px;
      color: white;
      background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_register.png) no-repeat 0 0;
    }

    #panele .lost-pwd {
      display: block;
      float:left;
      clear: right;
      padding: 15px 5px 0;
      font-size: 0.95em;
      text-decoration: underline;
    }
#fa_ticker_block {
    height: 1px;
}

And create a javascript with this one :
Code:
$(document).ready(function(){$("#open").click(function(){$("div#panele").slideDown("slow");});$("#close").click(function(){$("div#panele").slideUp("slow");});$("#toggle a").click(function(){$("#toggle a").toggle();});});

HTML can be added in Announcements or anywhere.
levy
levy
Hyperactive

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

https://portofolio.goodforum.net/

Back to top Go down

Login Top Slide bar  Empty Re: Login Top Slide bar

Post by Arsalan3d July 9th 2013, 2:33 pm

I Read The tutorial already everything is same as you have directed me to do, But Is there Anything I am Missing?

You Can View My Forum And tell me: http://saudatricks.forummotion.com
Arsalan3d
Arsalan3d
Forumember

Male Posts : 55
Reputation : 1
Language : English, Hindi
Location : India

http://saudatricks.forummotion.com

Back to top Go down

Login Top Slide bar  Empty Re: Login Top Slide bar

Post by levy July 9th 2013, 2:36 pm

You activated the announcements ?Smile
levy
levy
Hyperactive

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

https://portofolio.goodforum.net/

Back to top Go down

Login Top Slide bar  Empty Re: Login Top Slide bar

Post by Arsalan3d July 9th 2013, 2:40 pm

Yes I Put the HTML Code In Announcement But Nothing Seems To Work :'(
Arsalan3d
Arsalan3d
Forumember

Male Posts : 55
Reputation : 1
Language : English, Hindi
Location : India

http://saudatricks.forummotion.com

Back to top Go down

Login Top Slide bar  Empty Re: Login Top Slide bar

Post by levy July 9th 2013, 2:57 pm

Login Top Slide bar  C3647950d9

Had like that , is impossible to don't have the login bar .. also , you added the CSS and javascript ?
levy
levy
Hyperactive

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

https://portofolio.goodforum.net/

Back to top Go down

Login Top Slide bar  Empty Re: Login Top Slide bar

Post by Arsalan3d July 9th 2013, 3:06 pm

It Is Showing But the thing Is Its Not Taking any action And Even when I am logged In It's Still login/Register, Why Is it So,

You can have a look at my forum Smile
Arsalan3d
Arsalan3d
Forumember

Male Posts : 55
Reputation : 1
Language : English, Hindi
Location : India

http://saudatricks.forummotion.com

Back to top Go down

Login Top Slide bar  Empty Re: Login Top Slide bar

Post by Sanket July 9th 2013, 4:02 pm

Sanket
Sanket
ForumGuru

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

Back to top Go down

Back to top

- Similar topics

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