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

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


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:

	font-style: italic;

For example, I define all my "image" type:


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


NickWebman’s picture


HS’s picture

Thank you for this valuable tip! Happy new year!

thalemn’s picture

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!

Tom Hale
New Day Web Design

SaschaBerlin’s picture

Thank you!

pria’s picture

How to set the label side the field?

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


anjjriit’s picture

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 {
#comments textarea,
  clear : left;

sample for this code i have used in

Exploratus’s picture

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!!

chaumurky’s picture

For group_test just go .group-test

chaumurky’s picture

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

jordanmelnick’s picture

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.

mas0h’s picture

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

Thanks bro!

anilkumarv’s picture

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

print drupal_render($form['name']);
print drupal_render($form['sub']);
print drupal_render($form['msg']);
print drupal_render($form['mail']);
print drupal_render($form['url']);
print drupal_render($form['submit']);
print drupal_render($form);
jeeremie’s picture

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>

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

faqing’s picture

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

tungmai’s picture

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.

lecinema44’s picture

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