HowTo: Theme a CCK input form

Steps

Step 1: Create your CCK content type
Step 2: Create a [yourcontenttype].tpl.php file
Step 3: Modify template.php
Step 4: Modify style.css

Step 1: Create your CCK content type

Create a CCK content type called 'event_listing' and add some fields to it. I have added contact information, location, event information fields etc.

Create at least one node (create an event listing with your new content type).

Step 2: Create a [yourcontenttype].tpl.php file

Now create a text file called 'event_listing_edit.tpl.php' and put it in the directory of your selected theme (which is somewhere under the '/theme/' directory. For example, my template.php file is found here: /theme/internet_jobs/). You could call this pretty much anything, but it will make a lot more sense and be easier to manage if you call it something like this.

Now add the following PHP code snippet to the tpl.php file - this is simply sample text to prove that your 'next step' (modifying template.php) is actually working.

print("yahoo, it works!");
?>

Step 3: Modify template.php

Now the hard part - we need to open and edit your template.php file which is again in the directory of your selected theme (in my case it is located here: /theme/internet_jobs/template.php)

You will need to add two seperate functions in this file, one to call your custom event_listing_edit.tpl.php file when the form is being edited and another one to call it when a NEW node is to be created (you only need one tpl.php file, but as the template.php file modifications are overriding default functionality, it is necessary to instruct drupal to use the custom file for each case.

At the end of the template.php file, add the following snippets which you should be able to see is two seperate override functions:

// Add Form Start (jghyde)
if ((arg(0) == 'node') && (arg(1) == 'add') && (arg(2) == 'content_event_listing')){
  function phptemplate_node_form($form) {
    return _phptemplate_callback('event_listing_edit', array('user' => $user, 'form' => $form));
  }
}
// Add Form End

// Edit Form Start (Dublin Drupaller)
if ((arg(0) == 'node') && (arg(2) == 'edit')){
  $node = node_load(array('nid' => arg(1)));
  function phptemplate_node_form($form) {
    return _phptemplate_callback('event_listing_edit', array('user' => $user, 'form' => $form));
  }
}
// Edit Form End
?>

You can see from the snippets who actually wrote them (although I have modified them slightly from their original) - thank you jghyde and Dublin Drupaller ().

Now try to edit your event_listing node you should see the text 'yahoo, it works' on the page - see screenshot. If you don't get the 'yahoo' message, there a couple of 'suspects' to look at: go check out your naming convention in the template.php file, I tripped up and referred to my tpl.php file incorrectly a few times before I got it right.

The next step is to add all the fields you want back onto the input form. You can find out what fields are available to your form by putting the following line of code in your custom tpl.php file (Tip from for outputting data into a nicer format)

print("yahoo, it works!
");
print("

");
print_r(array_values($form));
print("

");
?>

You will see a great big long list of information describing the fields available to your input form, the part you are interested in looks like this (there will be a section like this for every field and object on the form):

[field_website] => Array
  (
    [0] => Array
      (
        [value] => Array
          (
            [link] =>             [title] => Janze.com
            [attributes] =>
          )
      )
  )

In this example, if I want to refer to the website URL, I would refer to it like this:

['field_website']['0']['value']['link']
?>

. So if I want to add the website URL to my input form I would add the following line to my tpl.php file:

print form_render($form['field_website']['0']['value']['link']); ?>

(I have wrapped the line in a 'div id=' tag so I can style it using CSS)

Now if I edit my event_listing node, I will get something that looks like this:

Don't forget to delete the test line that adds 'yahoo, it works!'.

Now go ahead and add the rest of the fields you want to the form.

If you want to make a group of fields that collapse, all you have to do is wrap those particular fields with

and if you want the Group to have a name add

Contact Info

right after the opening fieldset. Here is an example:

 

   

Contact Info

   

print form_render($form['field_name']); ?>

   

print form_render($form['field_email']); ?>

   

print form_render($form['field_phone_0']); ?>

   

print form_render($form['field_website']['0']['value']['link']); ?>

   

print form_render($form['field_description']); ?>

 

This will look like:

Interesting bits

It is a bit odd, but at the end of your tpl.php file you put the

print form_render($form);
?>

line which will render all remaining form objects (fields and buttons) that have not previously been referred to. That means it will now display all fields that you have not explicitly added in previous lines of code. Now, if you are like me, the reason you didn't explicity add them to the form is because you DON'T want them to be there!

So, to get rid of the fields that have now been automatically added back in, I have found two methods, one that worked for me (that I am sure is 'wrong' because it isn't very elegant) and another that is very elegant, but didnt' work for me. I would definitely try the 'elegant' route first......which is, you have to override unwanted fields explicity in your template.php file. For example, if I do not want to display the website, I put this text

$form['field_website'] = '';
?>

in the template.php file, inside your override function (before the callback). Reading this line of code shows us that we identify the field on the form and set its value to '' - nothing. Here is what the function would look like:

// Add Form Start (jghyde)
if ((arg(0) == 'node') && (arg(1) == 'add') && (arg(2) == 'content_event_listing')){
  function phptemplate_node_form($form) {
    $form['field_website'] = '';
    return _phptemplate_callback('event_listing_edit', array('user' => $user, 'form' => $form));
  }
}
// Add Form End

// Edit Form Start (Dublin Drupaller)
if ((arg(0) == 'node') && (arg(2) == 'edit')){
  $node = node_load(array('nid' => arg(1)));
  if ($node->type == 'content_event_listing'){
    function phptemplate_node_form($form) {
      $form['field_website'] = '';
      return _phptemplate_callback('event_listing_edit', array('user' => $user, 'form' => $form));
    }
  }
}
// Edit Form End
?>

Note that I had to put the code snippet into BOTH the 'Add form' and 'Edit form' sections that I newly added.

The 'not so elegant' way to do it is to add the unwanted fields to your tpl.php file, just like the wanted ones and then simply use CSS 'display: none;' to style it away (see below).

Step 4: Modify style.css

OK, now you have a form with all the fields you want on it, none of the ones you don't want and you may even have grouped some of them together into a collapsible group, now what? Now you can style each of those elements using CSS. I am no CSS guru, so I am only doing a few simple things here: 1) I am showing an example of using CSS to hide a field, and 2) I am also putting two fields side by side.

To use CSS to hide a field, simply identify the

ID of the field that you want to hide, then create a style in your style.css file for that

(or in your custom, linked css file - I think it is recommended that you actually use your own CSS file so that any modifications you make will survive an upgrade).

Here is an example:

#jpj10 {
  display: none;
}

To use CSS to put to fields side by side, you need to wrap each field that you want side by side in tags instead of

tags like this:

print form_render($form['field_phone']); ?>
print form_render($form['field_website']['0']['value']['link']); ?>

Then create styles for them to float left like this:

#jpj8b, #jpj8c {
  float: left;
}

Now my two fields will display side by side - I leave it to you to make it look better - this is just the mechanics of getting it to work!

Additional information

FYI, for those playing around with Drupal 5.x; replace form_render() with drupal_render() - thanks to

阅读(1797) | 评论(0) | 转发(0) |

0

上一篇：呆在这个躯壳里的孤独灵魂

下一篇：上网的N种境界