Original Tutorial Here : MySkins Studio
![[Imagen: tHGpMFF.jpg]](http://i.imgur.com/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.
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.
3. Adding jQuery
The form needs jQuery code to function and here is the code.
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.
MyBB in general conflicts with the jQuery and hence you need to add the no-conflict code as shown below.
So if you are not running the jQuery in your templates, use the code below :
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
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.
Código:
<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.
Código:
#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.
Código:
<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.
Código:
<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.
Código:
jQuery.noConflict();So if you are not running the jQuery in your templates, use the code below :
Código:
<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>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