Theming the Drupal 6 registration, login, and request new password pages (NOT just forms)

I created this tutorial because I found a lack of documentation on how to make standalone pages for your login/registration/request password pages.  By standalone, I mean have these pages look totally different than the rest of your site.  All the tuts I came across claimed to theme these pages, but they ended up theming just the forms themselves, or they tell you to make files that do not work with Drupal 6.

Requirements:

  • Drupal 6.x

Files used:

  • page.tpl.php
  • page-user-register.tpl.php
  • page-user-login.tpl.php
  • page-user-password.tpl.php

I created this tutorial because I found a lack of documentation on how to make standalone pages for your login/registration/request password pages.  By standalone, I mean have these pages look totally different than the rest of your site.  All the tuts I came across claimed to theme these pages, but they ended up theming just the forms themselves, or they tell you to make files that do not work with Drupal 6.

Register Page

STEP 1

Copy page.tpl.php three times.
Rename one copy to page-user-register.tpl.php
Rename the second copy to page-user-login.tpl.php
Rename the third copy to page-user-password.tpl.php

*page.tpl.php is located at yourtheme/page.tpl.php

Register Page

STEP 2

Flush all caches

STEP 3

The default user login is at /user.  For this, your new login page is at /user/login.

Your Request New Password page is at /user/password

Your Register Page is at /user/register

This is useful if you want to remove the three tabs from these pages.

Register Page

STEP 4

Test your three new pages.

Open up page-user-register.tpl.php, page-user-login.tpl.php, page-user-password.tpl.php and Select All text and delete. Save the pages, but don't close them.

Now go to /user/login, /user/password, and /user/register. They should all be blank pages.  This is good.

Now go back and undo the text deletes on those three pages. Save the files and close them. If you go back to those pages now, they will be back up.

 

STEP 5

Now start theming those three pages to your hearts content.  Adjust the code in each file to represent how you want them to look. And respectively, change your css files to reflect. For instance, you can take out your footers, headers, sidebars, change background colors. Rename, delete, or add new divs to styling them if you choose.

 

Here are just a few sample pages for inspiration

Crazy Egg

Crazy Egg

Porn.com (adult content, but it is a beautiful registration page)

Porn.com

Vimeo

Vimeo

Wufoo

Wufoo

Comments

Thanks for the tutorial. It

Thanks for the tutorial.
It is just common sense when you think about it. Problem is, it just did not occur to me to do this.

Hi, thanks for this tut! i

Hi,

thanks for this tut!
i was trying to customize my registration page with the technic above but i doesn't work... i'm using a sub-theme of the zen theme.

Any idea?

Thx

Can you give me some more

Can you give me some more information please. Tell me where you are suck.

I was creating an empty

I was creating an empty page-user-register.tpl.php into my theme directory, and after clearing the theme registry, i see always the registration page instead of a blank page... i suppose it's a side effect of using a sub-theme of the zen theme, cause when i copy the same file in the zen theme i have my blank page...

While using a Zen sub theme,

While using a Zen sub theme, it looks like you will have to leave page-user-login.tpl.php, page-user-password.tpl.php, and page-user-register.tpl.php in the zen/zen/ folder. I tested it, and leaving those 3 files there will still work for your sub theme.

Hi, Picxelplay. This tutorial

Hi, Picxelplay.
This tutorial is simply great. I have been searching to customize my registration form in the whole past week. I was really tired. But finally you guys provided me this. Thank you very much for this tutorial.

I have one more issue, I want my registration form to be of multiple pages how can I achieve this. Any or all help is greatly appreciated.

Once again thank you very much.
Pradeep.

Hello Pradeep, Your

Hello Pradeep,

Your welcome:)

You can use the Content Profile module to modify the registration form to add more fields and such. You can also make different registration forms for different roles using the Profile Setup module. Both of these have registrations on one page though. You could also think about having your registration on 1 page, but break it up into sections. Theme them so they are distinguished.

Content Profile module
http://drupal.org/project/content_profile

Profile Setup module
http://drupal.org/project/profile_setup

Read this following blog post also
http://drupalsn.com/learn-drupal/drupal-questions/question-4436

You can create a multi page form, and use hook_form_alter for use as a registration page(s), but I personally have never worked on such an issue. I never had a need for it, or had a client want it, but it is something I would like to look into more. From what I have read on the topic so far, it seems like people run into problems. Here are a few articles I found:

http://www.appnovation.com/create-multiple-step-form-drupal-6
http://drupal.org/node/598064

What about the page where you

What about the page where you are brought to after clicking on the link in your email?

E.g., http://site.com/user/reset/$userid/$random-hash?

I can't find out how to create a template for this page. Also, I can't find out how to preprocess this in the theme's template.php. I tried this:


function my_theme_preprocess_user_pass_reset(&$vars) {
$vars['form']['submit']['#value'] = "Lorem Ipsum";
$vars['rendered'] = drupal_render($vars['form']);
}

But doesn't work.

Thanks for the great tutorial!

Use page-user-reset.tpl.php.

Use page-user-reset.tpl.php. Just tested it on a fresh install of Acquia Drupal.

Thank you!

Thank you!

I'm using ninesixty theme. It

I'm using ninesixty theme. It didn't work for me.

I'm using ninesixty theme. I

I'm using ninesixty theme. I have the three page tpl files ready and flush the cache.
I noticed that the neither of the new template files are being used.

I just tested it with the 960

I just tested it with the 960 theme at http://drupal.org/project/ninesixty straight out of the box, and it worked just fine. Remember your login page is at /user/login, and not /user.

Hi, I've tried using this on

Hi,

I've tried using this on a copy of Garland theme, but not having much luck...

I've followed the steps correctly, but possibly it's the flush cache stage? I've been into performance and cleared the cache but still no joy. Is there something else I need to do at this point?

Thanks for your help

Shane

In fact - cancel my last

In fact - cancel my last comment just figured it out :-)

It was me being silly, I'd created the new pages in another directory - duh!

This is going to be cool - thanks for the tutorial!

Cheers

Shane

Hi, Sorry to bother you

Hi,

Sorry to bother you again, ok... I have possibly a more difficult task that I'm trying to do.

I have a main site i.e. site.co.uk then my drupal blog within a directory of the site site.co.uk/blog I want to keep the existing user pages in tact. i.e. site.co.uk/blog/user

But then from then main site I'm wanting to show a popup to a customised version of site.co.uk/blog/user/register

So I want the popup registration page to look different to the normal blog site registration, is that somehow achievable?

Regards

Shane

Sorry for the late reply

Sorry for the late reply Shane,
Does your main site use Drupal also? And if so, are they using the same codebase?

Hi, It's all in the same

Hi,

It's all in the same website, drupal is in a sub directory of the site.... such as /blog

so from /index.php I want to bring up a jquery popup window with a small registration form. But keeping the existing form the same.

If that makes any sense?

I was just wondering if that was possibly?

Cheers

Shane

I can't get this to work in

I can't get this to work in the Celju theme.

Any ideas?

Thanks.

Hey, Firstly, simple and

Hey,

Firstly, simple and great tutorial - thank you. All the others claim to do this but have complicated modifications of template.php only to call the entire page through php anyway - and not allowing real tinkering like here.

For others just to know, I found an issue when using the user/login page in my 'content-tabs' (which are the 3 links up to top of the register page, 'Create New Account' 'Login' and 'Request New Password).

Basically the link to 'Login' still went to /user not /user/login. So I changed the file name you said to make from page-user-login.tpl.php to just page-user.tpl.php and that works great.

Unless there's a side effect I don't know of this works better for me.

Cheers again.

Great and helpfull post. I'm

Great and helpfull post. I'm asking you if you allow me to make a draft of your post for
Drupal.org and edit it in the Theme-Guide 6

Drupal.org Member Wolfflow

A great tutorial. By the way,

A great tutorial. By the way, I tried also create page-user.tpl.php to override the template of page at /user(default login page). It works for me.

THANK YOU!!!

THANK YOU!!!

This certainly saved me some

This certainly saved me some time, thanks!

Newb question, though: will setting a URL alias of user -> user/login break anything?

I've set this up on my development box and it seems to work, eg, it reroutes the "Log in" tab's destination from user to user/login which then uses the new page-user-login.tpl.php file directly from user/register page.

I did this because I couldn't figure out why that tab was calling just user instead of user/login as user.module SEEMS to be calling user/login but I might be missing something in my interpretation of the user.module (obviously lol).

Anyways thanks again for any and all help!

Jim

this tutorial is

this tutorial is incomplete.
It's like :
- "How to create a beautiful website"
- "Here is how you can create a beautiful website. Turn on your PC, open notepad, and do your site beautiful."

you don't actually explain the most important : WHAT CODE to put INSIDE the pages... I mean, fine for the XHTML / CSS design, but how one could add forms, modify, etc...?

Everything that was outlined

Everything that was outlined in the tutorial was exactly what was meant to be. A simple tutorial. The things you noted are out of the scope of what was intended. Maybe I will think about doing an advanced tut. Thanks for your input.

Great tutorial and my

Great tutorial and my question may be a little off topic, but how can I change the login URL from www.domein.com/user/login to www.domain.com/something-else?

Great tutorial. Thank you

Great tutorial. Thank you very much.

Like a previous poster, I also had a problem with the /user path case. Making a 'page-user.tpl.php' solved that problem.

This was important, because I use LoginTobboggan. That module supports a redirect on 'permission denied' messages, and presents the login form if the user doesn't have access to the URL he was trying to visit. Then, on successful login the user is given the page they requested.

There is a wrinkle though. Creating the page-user.tpl.php makes the user account pages use that page template, so the 'my account' page uses the new login page theme.

Is there a way around this?

how can we seperate each html

how can we seperate each html elemnt in this page???
for example username label and username input type text.

in page.tpl there is only <?php print $content ?> how can we get this separate??

Thank you for this. I was in

Thank you for this. I was in ripping-out-hair mode trying to implement other tutorials until I got to work on this one. Clean, concise, easy, and flexible. Perfect!

This was the exact thing I

This was the exact thing I was looking for. While I'm not to keen on having 4 different page templates with that much redundant code in them. I have to say, this was much easier and faster than overriding the forms and functions, which is usually considered the "better" way.

Thanks for this tutorial. It

Thanks for this tutorial. It was a great find and helped me with something I wanted to do. I ended up needing to go with the page-user.tpl.php rather than page-user-login.tpl.php for reasons already discussed above.

This might help others. If you want the login page to look differently than the other pages the user gets after logging in, just add in a conditional php statement around the text you want to appear on the log in page.

if(!$logged_in) {

Text you want to appear on the log in page

}

Interesting article. More

Interesting article. More info here:

http://drupal.org/taxonomy/term/6298

This is certainly a big subject but I think it is worth mentioning how one can modify the form elements within each page.

http://drupal.org/node/19855

I tried this technique which

I tried this technique which worked well. In the end though I wanted to have granular control and add additional fields like terms and conditions to the registration form. I ended up writing my own module (first Time) to do this, which is probably the way to go if you want to add additional fields that will need to be validated. This was easier than I thought it would be after following the useful tutorial in the drupal fapi.

http://drupal.org/node/262422

Great resource, but you

Great resource, but you mention removing the three tabs but don't explain how. Don't play with my emotions like that! Seriously, though, could you lend a hint or post a link, please? Many thanks.

Post new comment

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.
CAPTCHA
Let us know you're human by solving this math problem.
* two = eight
Solve this math question and enter the solution with digits. E.g. for "two plus four = ?" enter "6".