How to add a class to a List field based on the content?

Question

I have a List Field for the Articles that will work like a Category.

This is an image of the PSD file:

There are 6 options on the list so the user can select the appropriate one when creating the Article. The problem is that each of those options needs a different CSS class and it should still be possible to make a View for those contents and show them as shown on the next image.

The boxes with colors is what I need to create as the Category, but I cannot add CSS classes for each content on the list while having the View that shows those 4 articles.

Any idea how can I get this to work?

Answer 1

Found the solution with the Field Formatter CSS Class module to get the css added, then for being able to use it on the Views module, the instructions from are (Drewpal's instructions):

'm using the views module. In order to pass the css property captured with the Field Formatter CSS Class module through to the Views module, you have to do the following:

Go to ../admin/structure/views and edit the view that's displaying the field(s) where you want the css to be applied

In the "Fields" section, add the content field that's capturing the css class (in my case it was Content: Style)

On the configuration page, uncheck the "Exclude from Display" box and set "Formatter" to Key (if using Select List as in the video), then click apply

Next, edit the field that you'll want the CSS class to be applied

On the config page, in the "styles" section, check "Customize Field HTML" and then check "Create a CSS class"

In the "CSS class" textbox enter the token from the field that holds the css class (note: the token should be the name of the field like this [feild_fieldname] - mine was [field_style])

The select apply and it will pass the css class through.

More info here: http://codekarate.com/daily-dose-of-drupal/drupal-7-field-formatter-css-class-module#comment-7154