Default Drupal Fields

While it is easy to assign CSS classes to fields in general both field label and value when using Views and when using useful Drupal modules such as the Field Formatter Class module, it is sometimes tricky to insert your custom CSS class to the field label itself.

A quick workaround is to assign a custom CSS class using the field labels value + the field label name. For example to asssign a class to the label of the field - Company Website, you will need to add a class like below: 

Add custom class to field label title

Take note for this content type, the field Company Website has a field name as "field_company_website", therefore, you just need to change the uderscores into dashes into like this "field-company-website".

Drupal-field-label.png

Take this to your CSS file, then add this before your default Drupal field label class ".field-label". Save and upload your CSS file, flush cache, then refresh page to reflect the changes.

Output: .field-name-field-company-website .field-label

Webform Fields

For webforms, a similar approach also works. This time, format should be webform component name + .label (default Webform label field name)

Output (for example): .webform-component--Company. label

Webform Layout

Consider using Webform Layout module https://www.drupal.org/project/webform_layout for a different usage in arranging layout of fields. Such requirements as fields arranged in multicolumn or grid-like layouts. For example, below:

webform-layout-fields.jpg

Leave a Comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
To prevent automated spam submissions leave this field empty.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
8 + 0 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.
Get reliable web hosting services

Recurring donation

Make Donation

  • Other: $

Donate now

Single donation

Make Donation

  • Other: $

Donate now