How to make beautiful tabbed login signup page in drupal

On my last tutorial I discussed about customizing the drupal login page. Today I will take it a step further and beautify the login page. Also add a tabbed login and signup form in the login page. It's going to look like the picture below. Let's get started.

The Process with Codes

You may be knowing that Drupal's login page is situated at /user/login
Well then let's get to the next step.
Open the theme's folder located at /sites/all/themes/YOURTHEME
Look for the file named template.php
Open this file and write this code

PHP

function theme_form_alter(&$form, &$form_state, $form_id) {  
     if ( TRUE === in_array($form_id, array( 'user_login','user_login_block'))){  
          $form['name']['#attributes']['placeholder'] = t('Enter UserName');  
          $form['pass']['#attributes']['placeholder'] = t('Enter Password');  
          $form['name']['#title_display'] = "invisible";  
          $form['pass']['#title_display'] = "invisible";  
}  
     if ( TRUE === in_array($form_id, array('user_register_form'))) {  
          $form['account']['name']['#attributes']['placeholder'] = t('Enter UserName');  
          $form['account']['name']['#title_display'] = "invisible";  
          $form['account']['mail']['#attributes']['placeholder'] = t('Enter valid Email');  
          $form['account']['mail']['#title_display'] = "invisible";  
}  
}  
function theme_form_user_login_alter(&$form, &$form_state) {  
     $form['name']['#description'] = t('');  
     $form['pass']['#description'] = t('');  
}  
function theme_form_user_register_form_alter(&$form, &$form_state) {  
     $form['account']['name']['#description'] = t('');  
     $form['account']['mail']['#description'] = t('');  
}  

Now make a new php template file named page--user--login.tpl
notice the double dash or it won't work.
Open this file and write this code

PHP

<?php print $messages; ?>  
<div class="site-logo">  
     <?php if ($logo): ?>  
          <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">  
           <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />  
          </a>  
     <?php endif; ?>  
</div>  
<div id="login-page">  
  <div class="login">  
    <div class="tabs">  
      <div id="lft" class="selectd">  
        <a id="tab1" href="#">Login</a>  
      </div>  
      <div id="rht">  
        <a id="tab2" href="#">Sign Up</a>  
      </div>  
    </div>  
    <div id="login-form" class="form1">  
      <?php $loginform = drupal_get_form('user_login'); ?>  
               <?php print drupal_render($loginform); ?>  
      <div class="forgot">  
        <a href="/user/password">Lost Password?</a>  
      </div>  
    </div>  
    <div id="signup-form" class="form1 hide">  
      <?php $signupform = drupal_get_form('user_register_form'); ?>  
               <?php print drupal_render($signupform); ?>  
    </div>  
  </div>  
</div>  

This is the end of php coding. Now we head over to the styling part.
Open the style.css file and write this code

CSS

 body{  
   font-family: Arial;  
 }  
 a{  
   text-decoration: none;  
   cursor: pointer;  
 }  
 .login {  
   width: 90%;  
   max-width: 400px;  
   margin: auto;  
   padding: 10px;  
   overflow: auto;  
   box-sizing: border-box;  
 }  
 .form1 {  
   width: 100%;  
   overflow: auto;  
   box-sizing: border-box;  
 }  
 .form1 form input{  
   width: 90%;  
   display: block;  
   margin:20px auto;  
   padding: 5px 10px;  
   border-radius: 8px;  
   outline: none;  
   border: 1px solid #ccc;  
   overflow: auto;  
   box-sizing: border-box;  
 }  
 .form1 form input:hover,.form1 form input:focus,.form1 form input:active{  
   border: 1px solid #60d4ff;  
 }  
 .form1 form input[type=submit]{  
   width:50%;  
   padding: 10px;  
   background:#0F61A9 ;  
   color: white;  
   text-transform: uppercase;  
   font-size: 18px;  
   letter-spacing: 1px;  
   font-weight: bold;  
   cursor: pointer;  
   border-bottom: 5px solid #0B518E;  
 }  
 .form1 form input[type=submit]:hover,.form1 form input[type=submit]:focus,.form1 form input[type=submit]:active{  
   background:#0B518E;  
 }  
 .login .tabs {  
   width: 90%;  
   margin: auto;  
   text-align: center;  
 }  
 #lft,#rht {  
   width: 50%;  
   float: left;  
   text-transform: uppercase;  
   letter-spacing: 1px;  
   font-weight: bold;  
   display: inline-block;  
 }  
 .tabs a{  
   display: block;  
   padding: 15px;  
   background:#094B86;  
   color: white;  
 }  
 .tabs #lft a{  
   border-radius: 10px 0 0 10px;  
 }  
 .tabs #rht a{  
   border-radius: 0 10px 10px 0;  
 }  
 .tabs #lft.selectd a,.tabs #rht.selectd a{  
   background:#218AE6;  
   display: block;  
   padding: 15px;  
 }  
 .login .tabs #lft a:hover,.login .tabs #rht a:hover{  
   background:#1370C3;  
   padding: 15px;  
 }  
 .forgot {  
   width: 90%;  
   margin: auto;  
 }  
 .forgot a{  
   color: blue;  
 }  
 .forgot a:hover{  
   color: #7373DC;  
 }  
 .hide {  
   display: none;  
 }  

That's almost over except for one more code snippet called the Javascript code.
Open the script.js file and write this code

Js

document.addEventListener('DOMContentLoaded', function(){  
 document.getElementById('tab1').addEventListener('click', function(){  
   document.getElementById('login-form').className = 'form1';  
   document.getElementById('signup-form').className = 'form1 hide';  
   document.getElementById('lft').className = 'selectd';  
   document.getElementById('rht').className = '';  
 });  
 document.getElementById('tab2').addEventListener('click', function(){  
   document.getElementById('login-form').className = 'form1 hide';  
   document.getElementById('signup-form').className = 'form1';  
   document.getElementById('lft').className = '';  
   document.getElementById('rht').className = 'selectd';  
 });  
});  

It's finally done and should be working great without any trouble if you copied the codes on the right files. That was four files with codes in four different languages. Let's see how it all works.

The Logic

In the first step we remove the ugly looking default drupal labels and descriptions from the login and signup forms, and also add the palceholders in the input tags of the respective forms. This is done from the template.php file by altering the default drupal forms. 

Next step is to create a .tpl file for the login page. It's easy and already explained in my previous tutorial. For those who missed can see the tutorial on How to customize the drupal login page
Now comes the beautification of the page using the css. You can customize the code here to fit your colors and needs.

Last thing remained was the working of tabs on clicking, which is handled by the Javascript code.
Hope it all went right for you. If having any troubles or errors you can comment below. Also comment for some code improvement suggestions.