Last updated June 6, 2010. Created by faqing on June 21, 2007.
Edited by chicagomom. Log in to edit this page.

Step 1. Find out the cck field names you want to theme:
/admin/content/types/fields
For example, I want to define the following two field names:

field_author
field_photo

Step 2. In style.css, at end add:

.field-field-author {
color: blue;
}
.field-field-photo {
float: right;
}

You can also define field type.
For example, I define all my "text" type:

.field-type-text{
font-style: italic;
}

For example, I define all my "image" type:
.field-type-image{
margin-top:1em;
}

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

thanks

Thank you for this valuable tip! Happy new year!

Thank you for this information - I have been looking for this solution for the past week and it works great. Nice and neat!

Happy New Year!

Thank you!

How to set the label side the field?

example :
Name : [-field-]
Email : [-field-]

Thx..

I'm use css for this requirement,
this this code, it will make your label and field in comment form for anonymus user will be placed inline

#comments #edit-name-wrapper .form-text,
#comments #edit-mail-wrapper .form-text {
clear : left;
width:  50%;
}
#comments .form-item label {
float: left;
width: 20%;
}
#comments #edit-homepage-wrapper {
display:none;
}
#comments textarea,
textarea#edit-body{
  clear : left;
}

sample for this code i have used in http://www.cipta-mobil.com

Anybody now the css command for doing this with a group of fields - so I can theme all the fields in a group at once. Thanks!!

For group_test just go .group-test

Actually what I'd love is to have group_test label replaced with an image...

figure out why this wouldn't work. I wanted to style the "padding-left" of two field-types on a given content type called "Project Posts," so I put the following my themes CSS file:

.field-field-describe-video {
padding-left: 0;
}
.field-field-embed-video {
padding-left: 0;
}

NOTHING HAPPENED. I also tried a number of other things to no avail. I'm an amateur with CSS, so maybe there is an obvious mistake. I'd appreciate any advice.

This is a very useful tip, but how about theming taxonomy terms and other static values ?

Thanks bro!

using function hook_theme in module and send to modulename-form.tpl.php in this we write a css code for

<?php
print drupal_render($form['name']);
?>
<?php
print drupal_render($form['sub']);
?>
<?php
print drupal_render($form['msg']);
?>
<?php
print drupal_render($form['mail']);
?>
<?php
print drupal_render($form['url']);
?>
<?php
print drupal_render($form['submit']);
?>

<?php
print drupal_render($form);
?>

Not working for me. The class does not appear in the HTML:

<div class="form-item" id="edit-group-profile1-experience-0-field-profile1-exp-startsalary-value-wrapper">
  <label for="edit-group-profile1-experience-0-field-profile1-exp-startsalary-value">Starting Salary: </label>
  <span class="field-prefix">$</span>
  <input type="text" maxlength="10" name="group_profile1_experience[0][field_profile1_exp_startsalary][value]" id="edit-group-profile1-experience-0-field-profile1-exp-startsalary-value" size="12" value="" class="form-text number">
  <div class="description">Salary in USD ($)</div>
</div>

FYI, I have created a new content type and added new fields in "Manage Fields".

Jeeremie
Visual Interface Designer
http://web-kreation.com

We are here dealing with cck. You are using Profile module. And you are in the edit mode also.

I'm new to drupal and I found this instruction to be very simple to follow. However, I still have a couple of questions:
1. Why change the format of the field ID?
the field ID is field_author and in the css you have .field-field-author{}
2. Where to insert this code?
I insert this code into the end of the style.css of my current theme which is the bluemarine but unfortunately, it doesn't work.
Please help.

Thanks for putting something so simply - it really helps beginners!