How to use style.css to theme CCK

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;
}

Comments

thanks

NickWebman commented 1 February 2013 at 23:32

thanks

Thank you for this valuable

HS commented 31 December 2009 at 23:36

Thank you for this valuable tip! Happy new year!

This Works Great!

thalemn commented 15 January 2010 at 03:21

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
www.newdaywebdesign.com

Thank you!

SaschaBerlin commented 24 February 2010 at 02:06

Thank you!

Side by Side

pria commented 7 March 2010 at 07:27

How to set the label side the field?

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

Thx..

try this css code

anjjriit commented 20 September 2010 at 13:51

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

Doing this for groups (fieldset)

Exploratus commented 6 April 2010 at 15:38

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

chaumurky commented 7 April 2010 at 04:36

For group_test just go .group-test

Actually what I'd love is to

chaumurky commented 7 April 2010 at 04:38

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

I can't for the life of me ...

jordanmelnick commented 8 April 2010 at 13:25

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.

taxonomy

mas0h commented 25 May 2010 at 10:55

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

Thanks bro!

side by side

anilkumarv commented 22 July 2010 at 05:16

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);

Not working for me. The class

jeeremie commented 2 August 2010 at 12:15

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".

We are here dealing with cck.

faqing commented 7 August 2010 at 20:49

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

Where to insert the code

tungmai commented 27 December 2010 at 18:23

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.