Add CSS class to outer div of view with combined view name and display id [#884974]

(I couldn't find any existing issues addressing this. Apologies if this is a duplicate.)

It is common to have multiple versions of a view with similar content (like the same content type) and slightly different design tweaks to each version (in addition to differences in which fields are included). So, it would help if there were a CSS class name added to the outermost markup of all views that shows the view name and display ID as one class.

Example, this is what views currently provides (this is the unformatted style):

<div class="view view-blog view-id-blog view-display-id-panel_pane_1 view-dom-id-1">

Which, IMO needs a class added that combines the view name and the display ID:

<div class="view view-blog view-id-blog view-display-id-panel_pane_1 view-dom-id-1 <strong>view-id-blog-display-id-panel_pane_1</strong>">

This would allow for styling different versions of the same view independently of the theme's body classes, panel layout classes as well as panel pane classes. Thus this would allow for styling the content independently of the page layout containers.

This should be added to the markup of all view style templates: views-unformatted.tpl.php, views-list.tpl.php, views-grid.tpl.php and views-table.tpl.php and any others like this.

I will *try* to come up with a patch. But wanted to get this in the queue sooner than later. :)

Comment	File	Size	Author
#1	views-newclass.patch	554 bytes	squiggy
#1

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

squiggy CreditAttribution: squiggy commented 18 August 2010 at 06:09

Status:

Active

» Needs review

File	Size
views-newclass.patch	554 bytes

Here's a patch. For example, with a view named "blog", this patch will add a class, view-blog-panel_pane_1 to the outer div of the view.

Also, I realize it's possible to chain the existing Views classes together. However, chaining classes is not always an option for me since I still sometimes have to support IE6. :( Chaining classes make CSS files less readable anyway.

Comment #2

squiggy CreditAttribution: squiggy commented 18 August 2010 at 14:23

Title:

Add a CSS class to outer most view template with combined view name and display id

» Add CSS class to outer div of view with combined view name and display id

Comment #3

merlinofchaos CreditAttribution: merlinofchaos commented 8 December 2010 at 23:57

Status:

Needs review

» Needs work

   $vars['classes_array'][] = 'view-' . views_css_safe($vars['name']);
   $vars['classes_array'][] = 'view-id-' . $vars['name'];
   $vars['classes_array'][] = 'view-display-id-' . $vars['display_id'];
+  $vars['classes_array'][] = 'view-' . $vars['name'] . '-' . $vars['display_id'];

Well this one gives me a little argh.

$vars['name'] should be in views_css_safe just like the one above it.

Yet $vars['display_id'] above it is not. The main purpose of this is to convert _ to -. Now, realistically, it probably should be. However, I know that a lot a lot alot of sites probably already have this in their CSS and don't want to change it. That probably means, to do this right, we need to do this:

   $vars['classes_array'][] = 'view-' . views_css_safe($vars['name']);
   $vars['classes_array'][] = 'view-id-' . $vars['name'];
   $vars['classes_array'][] = 'view-display-id-' . $vars['display_id'];
+  $vars['classes_array'][] = 'view-display-id-' . views_css_safe($vars['display_id']);
+  $vars['classes_array'][] = 'view-' . views_css_safe($vars['name']) . '-' . views_css_safe($vars['display_id']);

And maybe even have a setting somewhere so that we can reduce the weight. Since we committed the Semantic Views patch, maybe we can have a classes setting on views that lets us control which of these we use to further reduce the weight of Views.

Comment #4

Wappie08 CreditAttribution: Wappie08 commented 10 June 2011 at 12:12

thanks squiggy, this totally makes sense, I was experiencing the same problems..

@merlinofchaos views 7.x is still in beta so it's not that bad that css still gets altered, on the other hand probably to much sites are allready online with the old styles.

Greets Wappie