How to add an additional wrapper div within a Views row?

Question

I have a Views page with a format of ‘unformatted list’. For a views row I’d like to add an additional div to act as an additional wrapper. The resulting mark-up would then look like

<div class=“views-row views-row-1”><div class=“myWrap”>

I’ve looked in the various views template files located in the views module folder within the view module but am not seeing a place to add such a div.

Does anyone know how this can be achieved?

I guess I could use an HTML list and make that work but I’d prefer what i just described above.

Answer 1

This could be done in a couple of ways depending on your requirement.

1. If you want to add a wrapper div to a particular row: (Note: This will work if you are displaying fields in the view)
   • Click on that field.
   • Under style settings select the HTML element, and choose DIV.
   • You can also add the class to this div with the "Create a CSS class" option.
2. If you want to add a wrapper to all the rows: (NOTE: This will only work for D7)
   • The best way to do this is via a views template. Click on the "Advanced" section on the right hand side.
   • Click on the "Theme information"
   • Select "Views row style output"
   • Copy the template content.
   • Create a template with the name provided against "Row style output" link in the screenshot above. Paste the content into it.
   • Add an extra div element in the template directly.
   • Note: The template overrides are provided from "generic" to specific" if you go from left to right. E.g. views-view-fields.tpl.php would get applied to all the rows of all the views, and the specificity of the templates goes on increasing as you go right of the "Theme information".

Answer 2

The solution below will wrap all your rows inside your class, as long as you are not using the views-row view-row-1 classes for something specific, this will work too

You can add a row class by clicking on the Settings link that its beside Unformatted List

This will output:

<div class=“views-row views-row-1 example”>

then doing .example { border: solid red; } will add red border to all your rows.