Theming the user account page in Drupal

Published August 19th, 2010

This is an example of creating a template file to custom theme the Edit Account page in Drupal (user/#/edit).

This example is specific to Drupal 6. For suggestions related to Drupal 7, please check the comments below this article.

For the sake of an example of what “could” be done, the template is split into a two column layout, with parts of the form in each column. Also various adjustments and changes are made to some of the form elements, such as rewording a description, changing some of the fieldset titles, adjusting the size of some of the form fields, and renaming the submit and delete buttons.

This code example assumes several settings are enabled on your Drupal site, including: User pictures, signatures, and the permission to select alternate themes (although the UID 1 admin will still be able to select themes here in any case).

Depending on the modules you have installed, additional variables for the fields produced by those modules will need to be prepared in the preprocess function, and added to the user-profile-form.tpl.php in order to show up. As needed, you can uncomment the dsm($vars['form']); line if you have Devel module installed, which will make it much easier to visually browse through the contents of the form and find the names of elements you want to include.

The <?php print drupal_render($form); ?> line at the bottom of user-profile-form.tpl.php is very important. There are a variety of hidden form element which must be included in order for the form to function correctly. Adding this line at the bottom will include the remaining part of the form that you haven’t already manually separated out for custom theming (both hidden fields, as well as any regular form content which you haven’t separated out manually). So long as no required fields are shown at the bottom here, it’s possible to wrap the area with a div set to display: hidden if you wish to hide them. Setting this part of the form to be hidden if required fields exist in it will result in the form being impossible to submit.

Much of this information comes from the excellent Drupal Dojo videos which introduce the method for preparing theme template files, as well as theming forms — you should absolutely watch them:

• Drupal Dojo Lesson 41: Theme Template Files for Drupal 6 (includes source files)
• Drupal Dojo Lesson 42: Fine-tuning the UI by Theming Forms In Drupal 6.0

Code for template.php

Add this code to template.php, changing both instances of YOURTHEME to the actual name of your theme:

Code for style.css

Add the following to style.css:

Code for user-profile-form.tpl.php

Create a new file in your theme’s directory called user-profile-form.tpl.php and paste in the following code:

After you add all the code and files, you will need to rebuild the theme registry in order for Drupal to load the new template file. The easiest way to do this is using Admin Menu module (top left icon) or the Devel block offered by Devel module. If you don’t have either of these (though you should) then you can rebuild the theme registry by either 1) Visiting the main Themes page and saving it without any changes, 2) Visiting the Modules page, or 3) Going to Administer > Site configuration > Performance and clicking the “Clear cached data” button.