Add CSS class to view fields

Question

I would like to add a CSS class to fields in a view. The view in the screenshot takes the title, the summary, the date and the tags of articles that are published to the frontpage. I know how to add a class to the whole article in the GUI, but I want to add a class to fields on the article in the view.

I have made changes to existing CSS classes, but they appear on other parts of the site.

Answer 1

I found the answer on a video

1. Go to 'Edit View'
2. Click on the field you want to add a CSS class to
3. Go to the 'Style Settings'
4. Check 'Customize field HTML'
5. Check 'Create a CSS class'

Answer 2

What @David said.

Or, if you want to keep the customization out of the DB and put it in your theme, copy the views field template into your theme and rename it...

Find the original template in the Views module folder. Just make a copy and put it in your theme templates folder.

Then rename it... views-view-field--my-field.tpl.php

Add your classes, then clear the theme cache.

If you ever work on larger projects, sometimes the back end folks don't want you to do anything to the DB. This approach maintains a complete separation, and nobody steps on anyone's toes.

This template suggestion would apply anywhere 'my-field' is displayed. If you need more specificity, go into the view under Advanced / Theming and look at the available template suggestions for ideas.