2

Is there a way to add an extra class to the View content wrapper, which outputs as <div class="view-content">?

To make it clear: I use Semantic views to generate a nice UL for a slider, but I am not able to add a wrapper with the proper class name to trigger the Jquery.

enter image description here

4

For Drupal 7

The div with view-content class comes from views-view.tpl.php template file.

You can always override your view theme and adjust the class names, HTML etc..

Under Advanced section of view click on information at the bottom of the section next theme, you will see a list of template files including the top level template which is views-view.tpl.php.

You can find a lot of tutorials how to override views templates file but in general, it's all about copying the right file to your theme and rename it with the right template file.

You can take look at this tutorial how to do that

For Drupal 8

Views UI no longer provide suggestions, In order to get the same information you need to enable Twig debugging.

You can enable Twig Debugging in sites/default/services.yml.

Set the debug variable to true. And clear cache.

parameters:
  twig.config:
    debug: true

(If services.yml does not yet exist; copy default.services.yml and copy it to services.yml.)

Using your browser debugger, you will see the templates suggestion as HTML comments, just be sure your browser debugger is set to show HTML comments.

Twig debugging output - Firebug/Firefox

| improve this answer | |
  • This works for 7, but in Drupal 8 those suggestions are not listed in the UI or the HTML source. – Kevin Apr 14 '18 at 16:29
  • 1
    @Kevin I update the answer to include Drupal 8 version :) – Ziftman Apr 14 '18 at 16:51
3

If your theme uses Classy as base theme (like Bartik does). (You can check this in your theme's .info.yml.)

Then copy /core/themes/classy/templates/views/views-view.html.twig

and paste it in your theme's /templates folder.

Now simply add new class here

  {% if rows %}
    <div class="view-content some-new-class">
      {{ rows }}
    </div>
  {% elseif empty %}

If this question is for D7, then replace .html.twig with .tpl.php

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.