Adding a wrapper to contain tables using grouping field in views / display suite

Question

I'm using a table to display fields data in views 3. Within this i've got a field selected to group these items which produces a heading and then a table for each group. All good up to this point. The issue i'm trying to solve is a way to manipulate all these tables - so i'd like to add a container, with an id to style accordingly. I'm able to access the wrapper for the whole via https://api.drupal.org/api/views/theme%21views-view.tpl.php/7 and the template for the table which in my instance is views-bootstrap-table-plugin-style.tpl.php (which allows me to markup for each table) What i'm looking is where the loop occurs for the grouped field so i can put a wrapper round the loop. Any suggestions?

EDIT: here is a grab of my view https://www.dropbox.com/s/a2mb85m1lo2oxr4/views-display.png The region i am trying to wrap is below the exposed filters form. I am using Display Suite > Views Displays to layout the view with exposed filters and views content in the left column and the map as an attachment in the right column.

EDIT: removing the view having its template defined via DS Views has given a result with markup with a .view-content wrapper around the tables (which is good) but isn't entirely helpful as i still need to split the view into two columns (which is why i was using DS).

https://www.dropbox.com/s/7aukgjkkux2xycs/views-display-no-ds.png

Whilst creating a custom template to do this by modifying an existing DS template and making a region specifically for my grouped table seems the quickest way to solve this, it certainly seems a bit messy as this will need to be done for every time i set to use grouped fields.

Answer 1

You can add classed to your regions within Display suite:

Add CSS classes to regions Now that you have defined regions you can define custom CSS classes for them.

• Go to Administration > Structure > Display Suite > CSS Classes (admin/structure/ds/classes)
• Enter custom class names in the fields "CSS classes for regions” (one per line). You can provide a human friendly class name by using a pipe ("|”), e.g.,: class_name_1 class_name_2|Class two extravagant|Extravagant subtle_emphasis|Subtle emphasis
• Click "Save”
• Go to Administration > Structure > Display Suite (admin/structure/ds/layout) and choose "manage display” for the desired entity.
• Choose the tab "Custom classes” to assign the classes to the regions
• Click the tab "Extra classes for regions”. Assign the defined classes to the regions.
• Click "Save”
• You can check the source code of your web page to see the new classes and start styling them in your CSS.

From Manage displays.

You can use above steps to add a class to your Display Suite region. Depending on how Views renders the View, explore the DOM to see if you need to select additional classes.