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.

Login Top Slide bar

View previous topic View next topic Go down

Login Top Slide bar

Post by Arsalan3d on 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 Fromhttp://help.forumotion.com/t112818-black-slide-in-login-panel-on-forumotion?highlight=login
But The Tutorial Is For PunBB Any Help?

Arsalan3d
Forumember

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

http://saudatricks.forummotion.com

Back to top Go down

Re: Login Top Slide bar

Post by Derri on 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


Forum Rules: :Forumotion Staff: :Appeal A Warning: :FAQ: :Tips & Tricks: :Forgotten Password/Login Issues
You need one post to send a PM
When your topic has been solved, ensure you mark the topic solved
Never post your email in public


Derri
Administrator
Administrator

Male Posts : 8385
Reputation : 576
Language : English & Basic French
Location : Scotland, United Kingdom

Back to top Go down

Re: Login Top Slide bar

Post by levy on 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
Hyperactive

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

http://help.forumotion.com/

Back to top Go down

Re: Login Top Slide bar

Post by Arsalan3d on 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
Forumember

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

http://saudatricks.forummotion.com

Back to top Go down

Re: Login Top Slide bar

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

You activated the announcements ?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

Re: Login Top Slide bar

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

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

Arsalan3d
Forumember

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

http://saudatricks.forummotion.com

Back to top Go down

Re: Login Top Slide bar

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



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

levy
Hyperactive

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

http://help.forumotion.com/

Back to top Go down

Re: Login Top Slide bar

Post by Arsalan3d on 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
Forumember

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

http://saudatricks.forummotion.com

Back to top Go down

Re: Login Top Slide bar

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


Sanket
ForumGuru

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

http://webartzforum.com

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