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:
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".
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:
Leave a Comment