How to add CSS classes to a Views-generated block? (NOT to its generated content, the block itself!)

Question

I don't know why, but Views doesn't add "human-readable" CSS class names (like e.g. the machine name of the view) to the blocks it creates (it only adds its classes to the generated "content" part when adding classes to the "CSS class" part in the view editor (see the screenshots below!)).
It only adds the usual block block-views, and possibly contextual-links-region CSS classes to the block(s), and generates a unique id (not class) like this: block-views-3d8f7966168beeec655c8ead69336789 (because its delta is this generated hash code).
It doesn't make sense to write CSS rules for these classes and ids (like .block-views-3d8f7966168beeec655c8ead69336789 { /* ... */ }), because these classes/ids might change when altering the Views block.

How can I add some custom CSS classes in an implementation of hook_block_view_alter(), if I cannot even identify these blocks because of their generated hash delta?

---

I do not want to use Block Class, because I feel it's like an overkill for just adding some classes to one or two Views-generated blocks (BTW I checked the module, and I feel SELECT css_class, module, delta FROM {block_class} query in block_class_preprocess_block() like an overkill, because it checks ALL the added classes, even if the block is hidden...).

So I would like to solve it from my own module.

---

EDIT

An example:

My view with the machine name and the added CSS classes:

The generated block's HTML code in the inspector:

Answer 1

First. You have "hash" - because you view machine name is too long.

Second - you can add your own classes to view

Answer 2

That's a old question, but there is no proper answer. I came across the same problem. The solutions I could think of was CSS parent selector (which doesn't exists yet) OR some Drupal manipulation.

I added a hook_preprocess_block to add a wrapper CSS class to all view blocks that define a CSS class. That's not trivial so I will put my code here. It may not work with all view blocks, if you have an issue with this code, feel free to update it and post your own version.

Example: View with CSS class "test" will be contained in a block with the CSS class "test-wrapper".

function <MY_THEME>_preprocess_block(&$variables) {
    $default_display_id = 'default';
    // Trying to access the field:
    //     $display_id =      $variables['elements']['#views_contextual_links_info']['views_ui']['view_display_id']
    //     $default_display = $variables['elements']['#views_contextual_links_info']['views_ui']['view']->display['default']->display_options['css_class']
    //     $display =         $variables['elements']['#views_contextual_links_info']['views_ui']['view']->display[$display_id]->display_options['css_class']
    if (isset($variables['elements']['#views_contextual_links_info']['views_ui'])) {
        $view_ui = $variables['elements']['#views_contextual_links_info']['views_ui'];
        if (isset($view_ui['view_display_id'])) {
            $display_id = $view_ui['view_display_id'];
            if (isset($view_ui['view']) && property_exists($view_ui['view'], 'display') && isset($view_ui['view']->display[$display_id])) {

                $default_css_class = NULL;
                if (isset($view_ui['view']->display[$default_display_id])) {
                    $default_display = $view_ui['view']->display[$default_display_id];
                    if (property_exists($default_display, 'display_options') && isset($default_display->display_options['css_class'])) {
                        $default_css_class = $default_display->display_options['css_class'];
                    }
                }

                $view_css_class = NULL;
                $display = $view_ui['view']->display[$display_id];
                if (property_exists($display, 'display_options') && isset($display->display_options['css_class'])) {
                    $view_css_class = $display->display_options['css_class'];
                }

                $css_class = $view_css_class ? $view_css_class : $default_css_class;
                if ($css_class) {
                    $variables['classes_array'][] = "$css_class-wrapper";
                }
            }
        }
    }
}

Answer 3

There is a module for this purpose.

View block top class

Answer 4

For me hook_preprocess_block() didn't work. (Maybe because I had to add the block directly from a template file via views_embed_view().)

However, hook_preprocess_views_view() with a simple check for $vars['view']->current_display did work:

function MYMODULE_preprocess_views_view(&$vars) {
  // 'MYBLOCK' usually comes as 'block' if this view only has one
  if ($vars['view']->name == 'MYVIEW' && $vars['view']->current_display == 'MYBLOCK') {
    // here I add a class that contains the current theme's name
    global $theme;
    $theme_name = array_pop(explode('/', (drupal_get_path('theme', $theme))));
    $vars['classes_array'][] = $theme_name.'-theme';
    // but you can simply do the following as well
    $vars['classes_array'][] = 'MYSTRING';
  }
}

Answer 5

The easiest way for me was to duplicate the file block.tpl.php, rename it to block--myregion.tpl.php and then add my classes inside it.

See: Theming blocks page.