I love using Views (especially with Panels), but my CSS is bloated with redundant style code for the many, many views we use on our page (see That Other Paper to get an idea of how many differently styled views we employ). Our CSS file would be much slimmer if I could insert some custom class statements into each view's output -- e.g., class="view-green" or class="my_custom_view_style". Currently, my CSS looks something like this:

	/* orange */
	div.view-recent_picks div.view-title, 
	div.view-featured_itinerary div.view-title, 
	div.view-featured_itineraries div.view-title {
		background: rgb(230,99,27) url(images/bg.grad.orange.gif) no-repeat top left;
		border-left: 5px solid rgb(244,201,0);
		}
	div.view-recent_picks h2.title a, 
	div.view-featured_itinerary h2.title a, 
	div.view-featured_itineraries h2.title a {
		color: rgb(230,99,27) !important;
		}
	div.view-recent_picks h2.title a:hover, 
	div.view-featured_itinerary h2.title a:hover, 
	div.view-featured_itineraries h2.title a:hover {
		background: rgb(230,99,27) url(images/bg.grad.orange.gif) no-repeat top left;
		}
	div.view-recent_picks div.content img, 
	div.view-featured_itinerary div.content img, 
	div.view-featured_itineraries div.content img {
		border: 1px solid rgb(230,99,27);
		}

If I could simply insert something like "view-orange" into a view's class attribute, I could save myself lots of code (and improve the performance of the site).

Comments

merlinofchaos’s picture

merlinofchaos commented

I can definitely see your problem, and I can see where applying a CSS tag to the view could be VERY handy. Such a feature is going to have to wait for a time; I'm avoiding making database changes until I do Views 2, which is still a couple of months off.

You *might*, however, be able to accomplish a LOT by overriding 'theme_views_view'.

  function phptemplate_views_view($view, $type, $nodes, $level = NULL, $args = NULL) {
    switch ($view->name) {
       case 'foo':
       case 'bar':
         $class = 'baz';
         break;
       case 'apple':
       case 'orange':
         $class = 'fruit':
    }

    $output = '<div class="' . $class . '">';
    $output .= theme_views_view($view, $type, $nodes, $level = NULL, $args = NULL);
    $output .= '</div>';
    return $output;
  }

Basically, this creates a wrapper around each view that'll apply a 'super' CSS tag to it. That'll clean your CSS significantly, possibly at the cost of a little extra code in your template.php.

todd nienkerk’s picture

todd nienkerk commented

Dear merlinofchaos:

Your fix has worked like a charm. You've saved me PAGES of CSS code. Thanks!

merlinofchaos’s picture

merlinofchaos commented
Status: Active » Fixed
todd nienkerk’s picture

todd nienkerk commented

Is it necessary or recommended to replace "phptemplate_views_view()" with "mythemename_views_view()"? Both work for me (I'm running 4.7), but I'd like to know the preferred practice.

merlinofchaos’s picture

merlinofchaos commented

phptemplate_views_view() is preferred -- it is less specific and will work if you someday do sub-themes.

Anonymous’s picture

(not verified) commented
Status: Fixed » Closed (fixed)
arcane’s picture

arcane commented

Just wondering what would be the Drupal 7 equivalent of this?

arcane’s picture

arcane commented

ok I found this for Drupal7:

http://drupal.org/project/views_preprocessors

and inserted this in my site_support module:

function site_support_preprocess_views_view__test(&$vars) {
//dpm($vars);
    switch ($vars['view']->name) {
       case 'test':
         $vars['classes_array'][] = 'bar';
         break;
    }   
}