mardi 8 décembre 2009

Modifier un theme drupal

Drupal themes

The design (or "look and feel") of our site is controlled by the theme. Drupal provides us with a number of themes out of the box. Initially, one theme, which is the default, is enabled. So all users of our site experience the same look and feel. If we wish so, we can enable more than one theme, so that our users may choose the look and feel of the web site.

Themes are administered via Administer | Site building | Themes.

[edit]Themes and our users

The themes administration page lists all the themes available to us in our Drupal installation. To enable more than one theme for our users, we simply need to check the Enabled box next to the themes we wish to enable, and select the Default button if we wish this theme to be the default look and feel for the site.

If they have permissions to do so, users can change the theme they use by editing their accounts. Grouped under Theme configuration is a list of the installed themes allowing the user to select the one they wish to use.

The list of themes displays a thumbnail of the theme, so that the user can see at a glance and select the layout of the theme.

[edit]Pre-installed themes

By default, Drupal has the following themes installed (although all but one is disabled):

  • Bluemarine
  • Chameleon
  • Garland
  • Marvin
  • Minnelli
  • Pushbutton

Many of these themes are old and out-of-date, particularly with regards to the way they have been created. But there may be one which is a good starting point for a theme we wish to create. Let's have a brief look at these themes.

[edit]Bluemarine

Quite a corporate theme, this is a block-based theme with a very rigid menu and header. The layout is fluid, so the design adapts to the width of the user's web browser.

Although a corporate theme, it has a less corporate feel than the Marvin theme, and is naturally less vibrant than themes such as Minnelli and Garland.

[edit]Chameleon

This is a very simplistic theme, making use of the whitespace and a white background. Older computers with poor color schemes may be better suited to use this theme, due to the lack of colors or dependence on images to achieve the design. Mobile devices too may work well with this theme.

[edit]Garland

This is the theme which is set to default on new Drupal installations.

This is a fluid width theme (unlike Minnelli, which is a fixed-width version of this theme).

The use of gradient color schemes in the header and menu, a fresh color scheme and the glassy effect logo is a style commonly used in web site design at the moment. Overall, it gives a modern, friendly, and welcoming feel to the site. Bold text[[Li

[edit]Headline text

nk title]]Image:Example.jpgInsert f--Janardhan 12:44, 13 August 2009 (BST)ormula


here 

[edit]Marvin

A very corporate and simplistic design, it is useful as a starting point for a business web site.

Further customization would make this theme look much better.

[edit]Minnelli

This is identical to the Garland theme, but with a fixed-width.

[edit]Pushbutton

This theme maintains a clean, professional look, and its use of typography seems to be designed with the visually impaired in mind.

[edit]Contributed themes

There are vast numbers of themes created by Drupal enthusiasts available on the Drupal web site, http://drupal.org/project/Themes. This web site lists available themes, as well as the Drupal version they were designed for. Screenshots of most of the themes are available, so we can see what the theme would look like.

Don't forget When downloading themes from the Drupal web site, or elsewhere, ensure that they are compatible with the version of Drupal you have installed.

[edit]Installing contributed themes

To install a contributed theme (that is, a theme from the Drupal web site), we simply need to extract the contents of the downloaded file into the /sites/default/themes folder, so we can enable, and configure them from the administration area. The Zen theme is an excellent starting point for creating a different look from the typical Garland look.

[edit]Customizing the default theme

Most themes can be customized slightly direct from the administration area. We can customize the following features of a theme:

  • The color scheme
  • Which elements are used in the theme (for instance. search box)
  • The logo
  • The favicon or the "shortcut" icon

These settings can also be set globally for all installed themes, or individually on a per theme basis.

Themes are customized by navigating to Administer | Site building | Themes and then clicking the configure link next to the relevant theme. Let's configure the default theme!

[edit]Color scheme

The colors used by the (Garland) theme can be changed in the color scheme group of settings. There are two options for changing the colors. We can either select a preset Color setfrom the Color set drop-down list, or we can create a custom color set based on the colors we define.

The color sets available include:

  • Blue Lagoon Selected by default; a bright, vibrant blue color scheme
  • Ash Dark grey color scheme
  • Aquamarine Green/Blue color scheme
  • Belgian Chocolate Dark red color scheme
  • Bluemarine Light blue color scheme; not as vibrant as blue lagoon and without a gradient
  • Citrus Blast Yellow color scheme
  • Cold Day Dark blue color scheme
  • Greenbeam Vibrant green color scheme
  • Mediterrano Orange/Red color scheme
  • Mercury Light grey color scheme with subtle gradient
  • Nocturnal Dark blue/grey color scheme
  • Olivia Light green color scheme with gradient
  • Pink Plastic Bright pink color scheme
  • Shiny Tomato Red color scheme
  • Teal Top Teal color scheme
  • Custom Allows us to select colors of our own choice

Personally I like the Mercury color scheme, so I will use that for Dino Space.

[edit]Custom color sets

We can also define our own color set by selecting custom from the list. With the custom set selected, we should click in the relevant color box we wish to change, and click the color on the color wheel, which will then update the color used by the set.

[edit]Color set preview

The preview section beneath the settings for the color scheme updates to reflect the colors we have set, for instance, if we select Mercury as the color scheme, the Preview image updates to the following:

[edit]Toggle display

The next group of settings is Toggle display, which allows us to select which additional elements of the theme are enabled. For instance, if we have the search module installed, we can select if a Search box is shown within the theme or not.

Boxes which are disabled (that is, where we cannot check them) are related to features which are not enabled (for instance, if the search module was not enabled, we could not enable the display of the Search box).

[edit]Logo image design

At the top of the page, we have the Drupal logo. We can easily change this to a logo of our own choice, by uploading it from this area.

Once a logo has been uploaded, it is then reflected in the web site, as demonstrated with my poorly designed logo below:

[edit]Shortcut icon settings

When you visit a web site, there is often a small version of the logo displayed next to the web address in the address bar; this is called a favicon. Similarly for uploading the icon, we can upload a favicon from the admin area.

The first stage in setting this icon is to actually create the icon file. Thankfully, there are a number of free online tools such as http://tools.dynamicdrive.com/favicon/ which allow us to upload an image and convert it into a favicon, which we can then upload to our site.

[edit]Global settings

A number of the settings we have looked into with our default theme can be configured on a global basis for all the available themes.

The settings which can be configured globally include:

  • Toggle display (including a few extra ones not available in the default skin, as not all elements are supported by all skins)
  • Content which contains additional post information
  • Logo image settings
  • Shortcut icon settings

[edit]Creating a theme: The basics

Creating a theme is a very large topic, and here we are going to cover it only very briefly. For more detailed information, please consider the following:


Knowledge of HTML, CSS and some PHP would be very beneficial for this section.


Important disclaimer The theme we create here is designed to illustrate how to create a theme quickly, based on an existing template. It is not designed to be a guide on best practices for theme design and creation. The resources mentioned earlier should help as a more comprehensive guide to creating themes. This just illustrates how easy it is to change the design of a Drupal site. When making this theme, you may wish to set your administrative theme to Garland, so that any changes made by the theme don't affect the administration area, so you can easily disable the theme if need be.

[edit]Theme structure

A theme is made up of the following files:

  • An info file, which is required
  • Template files
  • A template.php (optional)
  • A logo and a screenshot (optional)

[edit]Info file

This is a configuration file, which is named with the same name as the theme, with the extension .info, for example, dinospacetheme.info. An example .info file is shown below: name = Dinospacetheme description = Theme for the dinospace website version = 1 core = 6.x engine = phptemplate stylesheets[all][] = style.css This tells Drupal that our theme is calledDinospacetheme, that it is compatible with Drupal 6, and that the main style sheet which it will use is called style.css.

[edit]Template files

The main aspect of a theme is of course, the templates files themselves. These contain the HTML which makes up the sites design, as well as PHP code to dynamically insert content, menus, and other site information. We need to create the following template files:

  • page.tpl.php
  • node.tpl.php
  • comment.tpl.php
  • block.tpl.php

The page.tpl.php file is for pages, the node.tpl.php is for all nodes and content, and is inserted dynamically into the page.tpl.php template; the comment.tpl.php is for comments andblock.tpl.php is for any blocks that may be displayed.

[edit]Template.php

The template.php isn't required, and can be used to store any conditional logic, or pre-process functions (http://drupal.org/node/223430). We are not going to use a template.php file in our theme.

[edit]Logo and screenshot

A screenshot helps users get a quick preview of the theme, if they are considering using it, and can also help remind us (administrators) as to what the theme is, if we were to change the themes that are enabled, at a later date. The logo is the logo shown in the header.

[edit]Other files for themes

Themes can consist of more than what we have already mentioned. For instance, we could create sub-themes, in which case, a theme would need to contain the sub themes. Themes can also contain color variations, in which case, we would need a color directory containing a color.inc file.

[edit]Getting started

One of the easiest ways to get started is to copy the default theme and replace the files within it with the files for the new theme by taking an HTML template for a design, and breaking this apart to form the various template files we need. We are going to use the template as shown in the following screenshot:

This template has the following HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>pagetitle</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" title="Default page style" media="screen">
<!--@import "ds.css";--></style>
<style type="text/css" media="screen">
#nav li.home a {background: #2266BB !important;color: #FFF !important}

</style>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body id="">
<div id="wrapper">
<div id="main">
<div id="column">
<a href="#" title="">

<img src="images/dslogo.gif" alt="" />
</a>
<div id="nav">
<div class="block">
<h2>Login</h2>
<p>block</p>
</div>

<ul>
<li class="home"><a rel="nofollow" href="#" title="">Home</a></li>
<li><a rel="nofollow" href="" title="">Menu</a></li>
<li><a rel="nofollow" href="" title="">Menu</a></li>

<li><a rel="nofollow" href="" title="">Menu</a></li>
<ul>
<li><a rel="nofollow" href="" title="">Menu</a></li>
<li><a rel="nofollow" href="" title="">Menu</a></li>

<li><a rel="nofollow" href="" title="">Menu</a></li>
</ul>
</li>
<li><a rel="nofollow" href="" title="">Menu</a></li>
<li><a rel="nofollow" href="" title="">Menu</a></li>

</ul>
<div class="block">
<h2>Block</h2>
<p>block</p>
</div>
</div><!--/nav-->

</div><!--/column-->
<div id="main-content">
<div id="header">
</div><!--/header-->
<div id="content">
<h1>Welcome to Dino Space!</h1>
<p>

Donec ut leo. Aenean justo. Nam risus ante, malesuada ut, blandit id.
</p>
<p>
Nulla quam sem, consequat vel, dapibus sit amet, tristique nec, justo.
Nulla facilisi. Fusce risus sem, blandit eu, consectetuer sed, gravida a, dolor.
Sed ut felis vitae urna tempus imperdiet.
</p>
<h2>What is Dino Space?</h2>
<p>
Duis venenatis. Etiam eget elit. Nulla fermentum tincidunt arcu.
In tincidunt lectus in dui. Donec semper venenatis orci.
Cras iaculis porta velit. Nam congue. Ut pulvinar condimentum magna.
Vestibulum in dui in libero condimentum mollis.

</p>
<p>
Suspendisse tortor. Duis nec nisl. Nam rutrum tincidunt ligula.
Vivamus congue feugiat nisi. Vestibulum vehicula viverra est.
Suspendisse non enim non diam tempor vulputate.
Ut enim eros, sodales vel, facilisis ut, mattis non, ante.
</p>
</div><!--/content-->
<div id="footer">
<p>
<a href="http://www.peacockcarter.co.uk/web-design" title="Web designers Newcastle">

Web design Newcastle</a> by <a href="http://www.peacockcarter.co.uk/" title="Peacock Carter,
North East web designers in Newcastle">Peacock Carter</a>
</p>
</div><!--/footer-->
</div><!--/main-content-->

<div class="clear"></div>
</div><!--/main-->
</div><!--/wrapper-->
</body>
</html>

The following CSS is used in the template:


 /* peacockcarter.co.uk 2006 - 2009 [ds] */
/* Reset */
address, caption, cite, code, dfn, th{font-style:normal; font-weight:normal}
abbr, acronym{border:0}
body, html{margin: 0; padding: 0;}
blockquote, body, div, dl, dt, dd, fieldset, form,
h1, h2, h3, h4, h5, h6, input, li, ol, ul, p, pre,
textarea, td, th{margin:0; padding:0} caption, th{text-align:left}
h1, h2, h3, h4, h5, h6, p, pre, blockquote{background:transparent;
font-weight:normal; word-spacing:0px}
fieldset, img{border:0}
table{border-collapse:collapse; border-spacing:0; clear:both;
margin:10px; width: 525px !important}
/* Generic */
a, a:active, a:link,a:visited{background:transparent;
color: #000; font-weight: bold;text-decoration:underline}
a:hover{color:#2266BB; text-decoration: none}
abbr, acronym, dfn{border-bottom-width:1px; border-bottom-style:dotted; cursor:help}
address{color:#000; font-size:0.7em; line-height:1.8em}
blockquote {}
body{background: #FFF;color:#000; font-family: arial, verdana,
helvetica,sans-serif; font-size: 62.5%;}
caption{font-size:0.8em; font-weight:bold}
em{font-style:italic}
.float_left{float:left !important}
.float_none{float:none !important}
.float_right{float:right !important}
.clear{clear: both !important}
.hide {display: none !important}
#nav,h1,h2,h3,h4,h5,h6 {font-family: verdana, sans-serif}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h1 acronym,
h1 abbr{border-bottom-width:0px !important; text-decoration: none !important}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover,
h6 a:hover{text-decoration: underline !important}
h1{color: #2266BB;font-size:250%;letter-spacing:0;
line-height:110%;margin: 0;padding: 0}
h2 {color:#555; font-size: 200%;font-weight:bold;
letter-spacing:0; line-height:150%}
h3{color:#666; font-size:175%; font-weight:bold;
letter-spacing:1px;line-height:100%;margin-top: 5px}
h4, h5, h6{color:#555; font-size:1.1em; font-weight:bold;
letter-spacing:1px;line-height:1.5em;margin-top: 5px}
h2 a, h3 a {color: #555 !important; font-weight: inherit !important;}
p, address {text-align:justify}
ul{list-style-type:square}
strong{font-weight:bold}
caption{display: none}
th, td {padding: 5px}
th {background: #2266BB;color: #FFF;font-weight: bold}
td {color: #555}
/* Layout */
#wrapper
{
background: #FFF;
margin: 25px auto 0 auto;
padding: 0 0 75px 0;
width: 800px
}
#logo {}
#header {color: #000;height: 80px}
#nav
{
float: left;
font-size: 100%;
height: 52px;
}
#nav ul
{
list-style-type: none;
}
#nav li a
{
color: #330033;
display: block;
font-weight: bold;
padding: 2px 5px;
text-decoration: none;
width: 210px;
}
#nav li a:hover {
color: #2266BB;
}
ul ul {
font-size: 75%;
margin-left: 0 !important;
padding-left: 25px !important;
}
ul ul li {border-bottom: 2px #FFF dotted;}
ul ul li a {margin-left: 0 !important;width: 175px !important}

.block { margin-left: 25px; padding-left: 5px; border: 1px solid #2266BB; }
.block h2 {color:#555; font-size: 120%;font-weight:bold;
letter-spacing:0; line-height:150%}
/* Main */
#main {clear: both;font-size: 120%}
#main p,
#main ul,
#main dl,
#main ol
{
font-weight: normal;
line-height: 135%;
margin: 10px 0;
}
#main-content img {float: right;margin: 5px 0 5px 10px}
#main ul, #main dl, #main ol {margin-left: 25px}
#main-content {
float: left;
width: 475px
}
#content {background: #FFF;padding: 10px 25px}
#column {
background: transparent;
float: left;
padding: 10px;
width: 250px;
}
#column p {font-size: 90%;text-align: left}
#column img {float: right}
#footer {
background: #FFF;
clear: both;
color: #CCC;
font-size: 90%;
height: 105px;
padding: 5px 10px 0 10px
}
#footer p {padding: 0 100px 0 25px}
#footer a {color: #CCC}
#footer a:hover {color: #CCC}



We will need to break the HTML up into a number of template files, and insert the relevant PHP code to ensure that Drupal adds in our sites content. As this template was not designed with Drupal in mind, we may need to make changes to bits of it, as we go along.


[edit] Info file


We are going to create a theme called dstheme, which will use the phptemplate engine. So our .info file will be called dstheme.info and will contain the following:


name = dstheme
description = Theme for the dinospace website version = 1
core = 6.x engine = phptemplate
stylesheets[all][] = ds.css

[edit] Template files


One way to build the template files from the template HTML from earlier is to take the HTML and save it as page.tpl.php and place into it, some of the PHP code from the page.tpl.php file in the Garland theme. If we do this, and then install the theme, we should see how well Drupal links in with our HTML template, and also what we need to change to accommodate Drupal better.


[edit] Page.tpl.php


By merging the PHP from the Garland page.tpl.php file into our HTML template from earlier, we get this as the page.tpl.php file for our new theme. The PHP code which has been inserted is highlighted.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php print $language->language ?>"
lang="<?php print $language->language ?>"
dir="<?php print $language->dir ?>">

<head>
<title><?php print $head_title ?></title>
<?php print $head ?>
<?php print $styles ?>
<style type="text/css" media="screen">
#nav li.home a {background: #2266BB !important;color: #FFF !important}

</style>
<?php print $scripts ?>
</head>
<body>
<body id="">
<div id="wrapper">
<div id="main">
<div id="column">

<?php

// Prepare header

$site_fields = array();
if ($site_name)
{
$site_fields[] = check_plain($site_name);
}
if ($site_slogan)
{
$site_fields[] = check_plain($site_slogan);
}
$site_title = implode(' ', $site_fields);
if ($site_fields) {
$site_fields[0] = '<span>'. $site_fields[0] .'</span>';
}
$site_html = implode(' ', $site_fields);
if ($logo || $site_title) {
print '<a href="'. check_url($front_page) .'" title="'. $site_title .'">';
if ($logo)
{
print '<img src="'. check_url($logo) .'" alt="'. $site_title .'" id="logo" />';
}
print '</a>';
}
?>
<div id="nav">
<?php if ($left): ?>

<?php if ($search_box): ?><div class="block"><?php print $search_box ?></div><?php endif; ?>
<?php print $left ?>
<?php endif; ?>
<div class="block">

<h2>Login</h2>
<p>block</p>
</div>
<ul>
<li class="home"><a rel="nofollow" href="#" title="">Home</a></li>

<li><a rel="nofollow" href="" title="">Menu</a></li>
<li><a rel="nofollow" href="" title="">Menu</a></li>
<li><a rel="nofollow" href="" title="">Menu</a></li>

<ul>
<li><a rel="nofollow" href="" title="">Menu</a></li>
<li><a rel="nofollow" href="" title="">Menu</a></li>
<li><a rel="nofollow" href="" title="">Menu</a></li>

</ul>
</li>
<li><a rel="nofollow" href="" title="">Menu</a></li>
<li><a rel="nofollow" href="" title="">Menu</a></li>
</ul>

<?php if ($right): ?>
<?php if (!$left && $search_box): ?><div class="block"> <?php print $search_box ?>
</div><?php endif; ?>

<?php print $right ?>
<?php endif; ?>
</div><!--/nav-->
</div><!--/column-->
<div id="main-content">
<div id="header">
</div><!--/header-->

<div id="content">
<?php if (isset($primary_links)) : ?>
<?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?>
<?php endif; ?>
<?php if (isset($secondary_links)) : ?>

<?php print theme('links', $secondary_links, array('class' => 'links secondary-links')) ?>
<?php endif; ?>
<?php print $breadcrumb; ?>
<?php if ($mission): print '<div id="mission">'. $mission .'</div>'; endif; ?>

<?php if ($tabs): print '<div id="tabs-wrapper" class="clear-block">'; endif; ?>
<?php if ($title): print '<h2'. ($tabs ? ' class= "with-tabs"' : '') .'>'. $title .'</h2>'; endif; ?>
<?php if ($tabs): print '<ul class="tabs primary">'. $tabs .'</ul></div>'; endif; ?>

<?php if ($tabs2): print '<ul class="tabs secondary">'. $tabs2 .'</ul>'; endif; ?>
<?php if ($show_messages && $messages): print $messages; endif; ?>
<?php print $help; ?>
<?php print $content ?>

</div><!--/content-->
<div id="footer">
<?php print $feed_icons ?>
<?php print $footer_message . $footer ?>
</div><!--/footer-->
</div><!--/main-content-->

<div class="clear"></div>
</div><!--/main-->
</div><!--/wrapper-->
<?php print $closure ?>
</body>
</html>


When installed and viewed, this template appears as shown in the following screenshot:

Obviously, there still remains a lot of work, but the basics seem to have been partially slotted into place. Some important points to be noted:

  • The menu has automatically been placed in a div with a block class; the block style in our CSS was designed for blocks, and not the menu. To rectify this, we can change our CSS to rename block to blockd instead.
  • The menu items have icons next to them. This is because Drupal includes a default stylesheet for the menus, which sets this. We will have to override this within our own CSS.
  • Node, block and comment templates are still those from the default theme, although for this example, it isn't important.
  • The default menu element is not selected. This is because the selected element in the page is given a CSS class of active; so we need to accommodate this in our CSS.

View source One useful tip to remember is to view the source of the Drupal-generated page in your browser, and make a note of any style classes it gives to areas of the design, as these can be overridden by your own CSS.

To rectify these issues, the following additions to our CSS do the trick:

  .active{ background: #2266BB !important;color: #FFF !important}  ul.menu { list-style-type: none !important; margin-left: 0px !important;} .blockd { margin-left: 25px; padding-left: 5px; border: 1px solid #2266BB; } .blockd h2 {color:#555; font-size: 120%;font-weight:bold; letter-spacing:0; line-height:150%} .block h2 {color:#555; font-size: 120%;font-weight:bold; letter-spacing:0; line-height:150%} .block ul{ list-style-image: none !important; list-style-type: none !important; }  #block-user-0 {margin-left: 25px; padding-left: 5px; border: 1px solid #2266BB; width: 210px; }  #block-user-0 ul {margin: 0px !important; padding:0px;}  #block-user-0 li {margin: 0px !important; list-style-type: none !important; padding:0px;} 

The #block-user-0 styles are for the login box, to make them fit in with the original design template we started with, as you will see further on in this tutorial.

[edit]Template.php

As we discussed earlier, we are not using a template.php file in our theme.

[edit]Logo and screenshot

The logo in our site needs to be named logo.png for it to be automatically placed in by Drupal, so that if we were to distribute the theme, other administrators could change the logo by uploading a new one in the administration settings. A 150px by 90px image saved as screenshot.png serves as the screenshot.

[edit]In action

And there we have it, a very quick and basic theme of our own. With some time and thought we could customize the theme to any style we like. We've only scratched the surface with the themes we have created. There are of course many other areas of the theme which need to have proper attention paid to them, such as the breadcrumb trail, the primary or secondary menus (if used), blocks, forms, and messages (for instance when a new page is created).

When we are logged out, our log in box is nicely styled thanks to the other additions we've made to the CSS.

And of course, with the screenshot and various settings in the .info file, we have our theme listed nicely in Administer | Site building | Themes.

[edit]Additional References

  • For instructions on Customizing Drupal Theme- CSS , click here
  • For instructions on Building Drupal 5 Themes , click here
  • For instructions on Customizing Drupal 6 Themes , click here
  • For instructions on Theming Drupal , click here
  • For instructions on Installing Drupal , click here
  • For instructions on Troubleshooting Drupal, click here
  • For instructions on Setting Up The Development Environment for Drupal 6, click here
  • For instructions on Advanced Theming on Drupal Multimedia, click here
  • For instructions on Theming Drupal6, click here
  • For instructions on Theming Drupal 5 Views Recipes, click here
  • For instructions on Setting up Drupal for web services, click here
  • For instructions on Installing Drupal Views Module , click here

[edit]Source

The source of this content is Chapter 8: Theming on Drupal 6 Social Networking of Drupal 6 Social Networking by Michael Peacock (Packt Publishing, 2009).