Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5

[-]
Tags
to mybb form drop simple forum code jquery login how

How To Code A Simple Jquery Drop Down Login Form On Mybb Forum
#1
1. Building the Basic form with HTML :
Go to your theme templates > header templates > header_welcomeblock_guest template

Now copy the entire code from below and replace the entire code in the template.

<div id="logincontainer">
<span>Hello there Guest Please </span><a href="#" class="logbut show_hide">Login</a> | <a href="{$mybb->settings['bburl']}/member.php?action=register" class="regbut">{$lang->welcome_register}</a>
</div>
<div class="logbar">
<div class="arrow" style="border-bottom-color: #272727;"></div>
<div id="logincontainer">
<span>Hello there Guest Please </span><a href="#" class="logbut show_hide">Login</a> | <a href="{$mybb->settings['bburl']}/member.php?action=register" class="regbut">{$lang->welcome_register}</a>
</div>
<div class="logbar">
<div class="arrow" style="border-bottom-color: #272727;"></div>
<form action="member.php" class="loginform" method="post">
<input type="hidden" name="action" value="do_login" />
<input type="hidden" name="url" value="{$url}" />
<label>Username: </label>
<input type="text" name="username" value="" class="textbox"/>
<label>Password: </label>
<input type="password" style="margin-left: 6px;" name="password" value="" class="textbox"/>
</span>
<br/><input type="submit" class="button" value="Login" tabindex="3" />
<a href="{$mybb->settings['bburl']}/member.php?action=lostpw"> <input type="submit" value="{$lang->lost_password}" name="submit" class="button" /></a><br />
<label class="smalltext" title="If ticked, your login details will be remembered on this computer, otherwise, you will be logged out as soon as you close your browser."><input type="checkbox" value="yes" checked="checked" name="remember" class="checkbox"> Remember?</label>
</form>
</div>


2. Styling the form with Css and Css3:


The login dropdown needs to be styled with Css attributes to make it look beautiful.
You can use your own color choices and here is my choice.

Copy the entire code below.

Now navigate to your theme > global.css > advanced mode > paste it at the bottom of the CSS file and save it.

#logincontainer {
font-size: 14px;
font-weight: normal;
text-shadow: rgba(35, 172, 16, 0.84) 0px -1px 10px;
color: #FFF;
cursor: pointer;
box-shadow: inset rgba(0, 0, 0, 0.29) 0px 1px 3px, rgba(219, 219, 219, 0.05) 0px 0px 0px 1px, rgba(77, 75, 75, 0.1) 0px 1px 0px;
padding: 15px 20px;
background: #0E0E0E;
border-radius: 3px;
margin-top: 25px;
}

.show_hide {
    display:none;
}
.plus:after {
    content:" +";
}
.minus:after {
    content:" -";
}

.logbar  {
z-index: 500;
position: absolute;
background-color: #111;
padding: 20px;
margin-top: 10px;
    color: #fff;
float: left;
width: 250px;
border: 2px solid #272727;
border-radius: 3px;
box-shadow: -1px 0px 12px rgba(34, 116, 23, 0.19);
}

.regbut {
padding: 7px 9px;
background: #1B5F0A;
border-radius: 3px;
border: 1px solid #2E6B16;
}

.logbutton {
    background: #242424;
    color: #ffffff;    
    text-shadow: 0 0 2px #000;
    border: 1px solid #000;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    padding: 6px 10px;    
    -webkit-box-shadow: rgba(0,0,0,0.5) 0px 1px 3px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
    -moz-box-shadow: rgba(0,0,0,0.5) 0px 1px 3px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
    box-shadow: rgba(0,0,0,0.5) 0px 1px 3px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    text-shadow: 0 0 2px #000;
    font: 11px;
    text-decoration: none;
        cursor: pointer;
}

.logbutton:hover {
    background: #287F12;
}

.logbox {
    background: #1A1A1A;
        padding: 5px;
    border: 1px solid #2C2C2C;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    color: #f7f7f7;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
}

.logbox:focus {
        border: 1px solid #4CAD2D;
        outline: none;
        color: #fff;
}

#logincontainer a:link, #logincontainer a:visited {
    color: #f7f7f7;
    text-decoration: none;
}

.arrow {
position: absolute;
top: -9px;
margin-left: 50%;
width: 0;
height: 0;
border-left: 12px solid rgba(0, 0, 0, 0);
border-right: 12px solid rgba(0, 0, 0, 0);
border-bottom: 12px solid #000;
}




3. Adding jQuery:

The form needs jQuery code to function and here is the code


<script type="text/javascript">
jQuery(document).ready(function($){
  $(".logbar").hide();
  $(".logbut").addClass("plus").show();
  $('.logbut').toggle(
      function(){
          $(".logbar").slideDown().slideToggle("fast");
          $(this).addClass("plus");
          $(this).removeClass("minus");
      },
      function(){
          $(".logbar").slideUp().slideToggle("fast");
          $(this).addClass("minus");
          $(this).removeClass("plus");
      }
  );
});
</script>

Navigate to Templates > your theme templates > ungrouped templates > headerinclude templates

Copy the above code and paste it at the bottom of the template.
Make sure you are running jQuery in your template and it can be found out in the same template.
If you are not running jQuery then you need to add this code before the above jQuery code for the dropdown.


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

MyBB in general conflicts with the jQuery and hence you need to add the no-conflict code as shown below.

jQuery.noConflict();


So if you are not running the jQuery in your templates, use the code below :


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery.noConflict();
  $(".logbar").hide();
  $(".logbut").addClass("plus").show();
  $('.logbut').toggle(
      function(){
          $(".logbar").slideDown().slideToggle("fast");
          $(this).addClass("plus");
          $(this).removeClass("minus");
      },
      function(){
          $(".logbar").slideUp().slideToggle("fast");
          $(this).addClass("minus");
          $(this).removeClass("plus");
      }
  );
});
</script>


Save the templates and you are done.
  


Possibly Related Threads...
ThreadAuthor Replies Views Last Post
  HELP: Help Me Install Mybb On My Hosting I Will Pay Jadonking042 1 72 11-08-2017, 04:57 PM
Last Post: Teejay3200
  HELP: I Need Mybb Help prince 2 54 11-07-2017, 07:33 PM
Last Post: prince
  I Need The Premium Version Of Mybb Plugin For Moving Threads To Front Page Otahumele 0 36 11-02-2017, 06:32 PM
Last Post: Otahumele
  How To Add A Beautiful Pagination On Mybb Pedro 1 179 10-31-2017, 05:16 PM
Last Post: Dhron
  How Can I Unforce Mybb Theme on Users donblade 0 49 10-20-2017, 02:56 PM
Last Post: donblade
  HELP: How To Edit Mybb Template prince 15 165 10-18-2017, 12:15 AM
Last Post: prince
  How To Code A Simple Jquery Drop Down Login Form For Mybb James 3 142 10-16-2017, 10:44 AM
Last Post: kharlm
  HELP: Mybb Mydownloads Plugin Cybersky 5 93 10-16-2017, 01:02 AM
Last Post: Cybersky



Users browsing this thread:
1 Guest(s)

List of Users who browsed this thread: clive, Dhron, Otahumele, prince
How To Code A Simple Jquery Drop Down Login Form On Mybb Forum00