How to customize the drupal login and signup page

Drupal is a free to use Content Management System with the flexibility to customize everything present within it ranging from its internal working to its external looks. However most people are confused on how to do it. This post will deal on one of the aspects of customizing drupal, the login page.


Every site owner wants to have an attractive login page. Let's take a look at customizing the login page. This tutorial explains how to do it. However it does not explain how to make it look attractive. It just explain the process of accessing the page and the form. Let's begin.

The Process

 You may be knowing that Drupal's login page is situated at /user/login
Make a new php template file named page--user--login.tpl
notice the double dash or it wont work.
Open this file and write this code

The Code

 
<?php print $messages; ?>
<?php $loginform = drupal_get_form('user_login'); ?>
<?php print drupal_render($loginform); ?>

The Logic

 The page--user--login.tpl template file provides the login page.
First we print the messages like the password error etc.
The drupal_get_form() is used to get the required form, in this case its the user_login form.
For registration form use the user_register_form
Here drupal_render() is used to render the contents, but be careful to pass only variables or it shows error. So the two lines are used.
To make it look attractive just add the classes and the corresponding css.
More customizations on the login page can be found on my next tutorial. Stay with us.
Read more »

How to add viewport and other responsive meta tags to drupal

Responsive design is the need of every website. Without a responsive design you lag behind in the ever growing technology and standards. Responsive design is the key to deliver a perfect website to all devices that come in different sizes ranging from 3 inches to 21 inches.

How to add viewport and other responsive meta tags to drupal


While designing with drupal it is common to add a responsive design code to the website as drupal does not have one. Let's get to add then.

The Process

 For doing this you need access to the theme folder.
Open the theme folder situated at /sites/all/themes/YOURTHEME
Open this file template.php and write this code

The Code

 
function theme_page_alter($page) {  
$mobileoptimized = array(  
     '#type' => 'html_tag',  
     '#tag' => 'meta',  
     '#attributes' => array(  
     'name' => 'MobileOptimized',  
     'content' => 'width'  
     )  
);  
$handheldfriendly = array(  
    '#type' => 'html_tag',  
    '#tag' => 'meta',  
    '#attributes' => array(  
    'name' => 'HandheldFriendly',  
    'content' => 'true'  
    )  
);  
$viewport = array(  
    '#type' => 'html_tag',  
    '#tag' => 'meta',  
    '#attributes' => array(  
    'name' => 'viewport',  
    'content' => 'width=device-width, initial-scale=1'  
    )  
);  
drupal_add_html_head($mobileoptimized, 'MobileOptimized');  
drupal_add_html_head($handheldfriendly, 'HandheldFriendly');  
drupal_add_html_head($viewport, 'viewport');  
}

The Logic

 The theme_page_alter() alters each and every page.
The drupal_add_html_head() adds the meta tags in the <head> of the html output file.
So this adds the three tags as shown below
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

This will now support the @media queries in the CSS. That means you can start styling.

Read more »

customizing comment box

Prism