Add specific CSS class with Semantic Views

Question

I am searching for days now and don't find the solution so I exposed my problem here.

I am under Drupal 7 and I don't find an issue for this problem.

Here is the purpose: I created content with one specific field, a boolean, so when it's checked i want to add a class to an existing view. I explain.... Once I created content explained before, I create a view for it (with semantic views) and save! It works perfectly but....what I want to do is that when I check the boolean (in the content) it adds me a new class to the article () see figure below:

In a content (created with a custom content type), I check this checkbox:

And so:

became:

From now the source code looks like this:

Thank you very much for your answers!

Answer 1

This is possible to accomplish by overriding the View's template. You would have to create a custom Views tpl file with logic for adding a custom class based on a field value. Unfortunately you can not do this by simply using Views UI.

How to achieve this:

1. Add your Boolean field to the View and "Exclude from Display". Keep the default formatter of the field.
2. Create a custom View template. Click on Theme: Information in *Advanced settings* of your View. You'll see template suggestion for overriding different parts of the View. Here you are looking to override the Style Output of your View.
3. Click on Style Output link and you'll see the default content of .tpl file. Copy the code and paste it in a file named *semanticviews-view-unformatted--machinenameofyourview.tpl.php*. The name of the file that you should use will be listed in step #2, right after the one that it highlighted in bold, so you'll be safer by just copying and using that. Save this file in your current theme's template folder.
4. Now go back to the Theme:Information dialog of your View and click "Rescan Template Files" - you'll see that your new template is now detected by the View as it will become highlighted in bold. Click OK - now you told the View to use your new template. Save the view.
5. Open your new template file and paste the code below in it. You can replace the content of new template with the code pasted below, or just find the section // ADDED and paste it in the right place. *Section //ADDED will define the logic for adding custom class when Boolean field is checked.*
6. Replace the field_field_boolean w/ field_field_yourfieldname. Note: double field_ is necessary here. Also, replace the name of the class to your desired class name.

.....

<?php
/**
 * @file
 * Default simple view template to display a list of rows.
 *
 * @ingroup views_templates
 */
?>
<?php if (!empty($title)): ?>
  <<?php print $group_element; ?><?php print drupal_attributes($group_attributes); ?>>
    <?php print $title; ?>
  </<?php print $group_element; ?>>
<?php endif; ?>
<?php if (!empty($list_element)): ?>
  <<?php print $list_element; ?><?php print drupal_attributes($list_attributes); ?>>
<?php endif; ?>
<?php foreach ($rows as $id => $row): ?>
  <?php if (!empty($row_element)): ?>

  <?php // ADDED CODE ?>
  <?php
        $custom_class = '';
        if (isset($view->result[$id]->field_field_boolean[0]['raw']['value']) && $view->result[$id]->field_field_boolean[0]['raw']['value'] == TRUE) {
            $custom_class = 'my-custom-class';
        }
        $row_attributes[$id]['class'] = $row_attributes[$id]['class'].' '.$custom_class; 
    ?>
  <?php // END OF ADDED CODE ?>

  <<?php print $row_element; ?><?php print drupal_attributes($row_attributes[$id]); ?>>
  <?php endif; ?>
    <?php print $row; ?>
  <?php if (!empty($row_element)): ?>
  </<?php print $row_element; ?>>
  <?php endif; ?>
<?php endforeach; ?>
<?php if (!empty($list_element)): ?>
  </<?php print $list_element; ?>>
<?php endif; ?>

.....