4

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.

Improve this question

2 Answers 2

Reset to default
3

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. enter image description here
    • 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" advanced setting
    • Select "Views row style output"views row style
    • 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".
Improve this answer
5
  • 2
    The 1st part of your answer adds div to the field, and not the row. Also, note that the 2nd part of your answer is for Drupal 7 as Drupal 8 has no theme info link. Commented Jul 20, 2016 at 3:26
  • @NoSssweat Thanks for pointing out! Edited the first part to product exactly the same output as mentioned in OP. And added a note to the 2nd part. Commented Jul 20, 2016 at 3:33
  • I guess you are interpreting the Q title within a views row differently. When he says that, I assume hes talking about wrapping the entire row. But I can see that as being interpreted as wanting to wrap a field, since field is inside row. Commented Jul 20, 2016 at 3:50
  • 1
    @NoSssweat Yes, field is inside the row. My solution is as per the markup provided in the OP <div class=“views-row views-row-1”><div class=“myWrap”> Commented Jul 20, 2016 at 3:55
  • thank you but i tried those 2 options but it was not what was needed. Commented Jul 24, 2016 at 21:56
1

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

enter image description here

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.

Improve this answer
3
  • 3
    As per OP, an extra wrapper div is required to the views row; and not extra class. Commented Jul 20, 2016 at 3:18
  • @AjitS it will accomplish the same thing as long as OPer isn't using views-row for something. Commented Jul 20, 2016 at 3:23
  • 1
    Cannot be sure that it will, it just might. However, the requirement of the OP is different. You can suggest that this is an alternative approach that could be considered. I personally will go with this approach rather than adding on extra markup on top of all the markup views already provides. Commented Jul 20, 2016 at 3:36

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.