Customize the output style of a view field

Last updated on
1 December 2016

You can customize the HTML and CSS for a view. You can also enable or disable the default CSS classes.

  1. Navigate to the edit screen for a view (for example, admin/structure/views/view/MYVIEWNAME/edit).
  2. In the Fields section, click a field. The Configure Field dialog box displays.
  3. Click Style Settings.
  4. Enable one or more of the following options:
    • Customize Field HTML
    • Customize Label HTML
    • Customize Field and Label Wrapper HTML.
  5. For each of the enabled options, specify the HTML element to wrap around the item. You can also click Create a CSS Class and specify a class name.
  6. Enable or disable the Add Default Classes option. When enabled, this option specifies that the field uses Views default classes.
  7. Click Apply.