Welcome Guest ! Please   Login or Register


Check out our latest Premium Themes, Majestic , Majestic - Dark and Musk Themes for MyBB 1.8 Click to Shop Now

Now open for Custom Theme requests : Click to Order Now





 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Simple jQuery Drop Down Login Form tutorial for MyBB

envira Offline
Doctor Web
*******

Posts: 1,233
Joined: Aug 2012
Likes Received : 299

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 61,211.30Points
Post: #1
Star Simple jQuery Drop Down Login Form tutorial for MyBB

[Image: tHGpMFF.jpg]

Hello friends,
Here is a simple tutorial from our studio, for creating a simple drop down login menu/form for MyBB.
The tutorial needs some basic understanding in editing the templates and the css files.

So first its the basic HTML that you need to know.
To make things simple i am providing the whole code so you can copy and paste in respective templates.

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.

Code:
<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.

Code:
#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.

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.

Code:
<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.

Code:
jQuery.noConflict();

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

Code:
<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.

Demo:
Here is a demo of the dropdown login: Demo Link

This completes our tutorial and i hope it helps you.
If you like it please do share the tutorial and retain the original credits to our Studio.
Thank you
regards

[Image: lt79ucY.png]
(This post was last modified: 02-14-2014 11:31 AM by envira.)
02-14-2014 11:07 AM
Find
1
Quote




eloy gomez Offline
Junior Member
**

Posts: 4
Joined: Feb 2014
Likes Received : 0

Nationality:

Mood: None

Points: 40.32Points
Post: #2
RE: Simple jQuery Drop Down Login Form tutorial for MyBB

Thanks!
02-17-2014 08:47 PM
Find
0
Quote




LionS Offline
Junior Member
**

Posts: 4
Joined: Feb 2014
Likes Received : 0

Nationality: Undisclosed

Mood: None

Points: -9.28Points
Post: #3
RE: Simple jQuery Drop Down Login Form tutorial for MyBB

Thanks man !
02-18-2014 11:28 PM
Find
0
Quote




joelm Offline
Happy Costumer
****

Posts: 72
Joined: Sep 2014
Likes Received : 5

Nationality: Portugal

Mood: Artistic

Points: 1,793.47Points
Post: #4
RE: Simple jQuery Drop Down Login Form tutorial for MyBB

got a question on this tutorial
fro the dropdown box appear i have to click it twice
is that normal?
01-16-2015 12:35 AM
Find
0
Quote




envira Offline
Doctor Web
*******

Posts: 1,233
Joined: Aug 2012
Likes Received : 299

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 61,211.30Points
Post: #5
RE: Simple jQuery Drop Down Login Form tutorial for MyBB

Hmm I haven't updated the tut and would post a tut that is bug free thanks for reminding though.
Regards

[Image: lt79ucY.png]
01-17-2015 06:15 PM
Find
0
Quote




Z0lenDer Offline
Junior Member
**

Posts: 2
Joined: Jan 2015
Likes Received : 0

Nationality: Canada

Mood: None

Points: 101.18Points
Post: #6
RE: Simple jQuery Drop Down Login Form tutorial for MyBB

Thanks. as @enriva said after a refresh, I need to click two times for it to drop down.
Also, when I click on "forgot password" it logs me in.
01-24-2015 08:03 AM
Find
0
Quote




Z0lenDer Offline
Junior Member
**

Posts: 2
Joined: Jan 2015
Likes Received : 0

Nationality: Canada

Mood: None

Points: 101.18Points
Post: #7
RE: Simple jQuery Drop Down Login Form tutorial for MyBB

I fixed it as follows:
in the jquery code, instead of

$(".logbar").slideDown().slideToggle("fast");
write
$(".logbar").slideToggle("fast");

do the same for slideUp. I.e. Instead of

$(".logbar").slideUp().slideToggle("fast");
write
$(".logbar").slideToggle("fast");



Moreover, in the css part (global.css), logbutton should be renamed to logbut to match the name you used in the header html file.
01-25-2015 12:29 AM
Find
0
Quote




Igorkr Offline
IgorkrGN
**

Posts: 3
Joined: Jun 2016
Likes Received : 0

Nationality: Commonwealth

Mood: None

Points: 171.86Points
Post: #8
метод сильва книга

Ночью осматривал содержимое сети, случайно к своему удивлению увидел восхитительный веб-сайт. Вот: развитие метода сильва . Для меня данный веб-сайт показался очень нужным. Хорошего дня!

метод сильва исцеление
06-19-2016 04:58 AM
Find
0
Quote




JuliaVerB Offline
JuliaVerBIJ
**

Posts: 1
Joined: Aug 2016
Likes Received : 0

Nationality: Commonwealth

Mood: None

Points: 201.78Points
Post: #9
Лучший сайт

Сегодня днем разглядывал содержимое интернет, при этом к своему восторгу обнаружил отличный сайт. Вот смотрите: http://missis.top/ . Для нас вышеуказанный ресурс оказался весьма важным. Успехов всем!

http://missis.top/
08-22-2016 03:00 PM
Find
0
Quote




AnnaVerB Offline
AnnaVerBWG
**

Posts: 1
Joined: Aug 2016
Likes Received : 0

Nationality: Commonwealth

Mood: None

Points: 202.67Points
Post: #10
Мой сайт

Минуту назад осматривал данные сети интернет, и вдруг к своему удивлению заметил неплохой сайт. Вот посмотрите: http://portomaltese.net/category/evropa/ . Для моих близких данный сайт явился весьма важным. Удачи!

http://portomaltese.net/category/evropa/
08-22-2016 07:31 PM
Find
0
Quote





Possibly Related Threads...
Thread: Author Replies: Views: Last Post
Information Add Social Links to Your MyBB Forum envira 3 3,759 09-25-2016 03:59 AM
Last Post: smash
Heart Enhanced Social Share buttons Tutorial without plugins envira 13 8,147 09-05-2016 02:37 AM
Last Post: noah
  [1.8x] [How] MyBB Reputation Gabbar 0 419 10-29-2015 09:41 AM
Last Post: Gabbar
Smile Some MyBB Useful Codes that you can use in your templates envira 11 7,888 07-07-2015 09:18 AM
Last Post: Unr34lity
Star [1.8x] MyBB jQuery User Dropdown Menu with Font Icons and jQuery envira 0 1,108 07-07-2015 12:29 AM
Last Post: envira
Heart Global Tool Tips with Jquery for Mybb myskins 6 4,275 09-06-2014 07:42 PM
Last Post: Yorne
  How To Create Free MyBB-Based Forum. Jero 15 3,344 07-20-2014 06:44 PM
Last Post: VetFalco
Smile Tutorial to make 4 column footer for MyBB envira 9 4,987 07-20-2014 06:43 PM
Last Post: VetFalco
Heart Tutorial to make MyBB Tabbed Profiles/ Profile Tabs with jQuery envira 33 12,788 07-20-2014 06:18 PM
Last Post: VetFalco
Information Add Boxes to MyBB postbit User Details envira 4 5,292 04-10-2014 10:46 PM
Last Post: Dropkaz

Forum Jump:


User(s) browsing this thread: 1 Guest(s)

About Myskins

MySkins Studio is MyBB Themes Resource Website.

At MySkins Studio, We procreate MyBB Themes both custom MyBB Themes and premium Mybb Themes.We believe in quality and assure you the best MyBB themes at a very reasonable price , that suits your taste.

Feel free to drop in a request and get a quote.