This documentation is written for the 7.x-2.x version of Display Suite.

By default Drupal core wraps fields in multiple HTML elements, as e.g., in:

<div class="field field-name-field-size field-type-text field-label-above">
  <div class="field-label">Size:&nbsp;</div>
  <div class="field-items">
    <div class="field-item even">34</div>
  </div>
</div>

Display Suite allows you to override this markup via the user interface by using field templates. This could result in the following markup for the example above:

<div class="label-above">Size:&nbsp;</div>
34    

Enable field templates

To use Display Suite field templates:

  • Enable the sub module Display Suite Extras at Administration > Modules (admin/modules)
  • Go to Administration > Structure > Display Suite and click the secondary tab "Extras" (admin/structure/ds/extras)
  • Check the option "Enable Field templates"
  • Choose a Default Field Template (e.g., "Full reset" to remove all markup from a field)
  • Click "Save configuration"
  • Go to Administration > Structure > Display Suite (admin/structure/ds/layout) and choose "manage display” for the desired entity.
  • Click the cogwheel left of the field that you want to change.
  • Click "Save”

You can choose a field template, add CSS classes (if you have defined any) and change the value of the label.

Add CSS classes to fields

When field templates are enabled you can create custom CSS classes for fields.

  • Go to Administration > Structure > Display Suite > CSS Classes (admin/structure/ds/classes)
  • Enter custom class names in the fields "CSS classes for fields” (one per line). You can provide a human friendly class name by using a pipe ("|”), e.g.,:
class_name_1
in_your_face|In Your Face
super_emphasised|Super emphasised
  • Click "Save”
  • Go to Administration > Structure > Display Suite (admin/structure/ds/layout) and choose "manage display” for the desired entity.
  • Click the cogwheel left of the field that you want to change. The custom fields are available in the select list "Additional CSS classes"
  • Click "Save”

You can check the source code of your web page to see the new classes and start styling them in your CSS.