如何将CSS类添加到Views生成的块?(不是块本身的生成内容!)


8

我不知道为什么,但意见不添加“人类可读的” CSS类名(例如像视图的机器名)它创建的块(只增加了它的类的生成的“内容”部分时,在视图编辑器的“ CSS class ”部分添加类(请参见下面的屏幕截图!)。
它仅向块添加常规的CSS类block block-views,并可能添加contextual-links-regionCSS类,并生成一个唯一的id(而不是类),如下所示:(block-views-3d8f7966168beeec655c8ead69336789因为其delta是此生成的哈希码)。
为这些类和ID(如.block-views-3d8f7966168beeec655c8ead69336789 { /* ... */ })编写CSS规则是没有意义的,因为在更改Views块时,这些类/ ID可能会更改。

hook_block_view_alter()如果由于生成的哈希增量而无法识别这些块,该如何在实现中添加一些自定义CSS类?


我不想使用Block Class,因为我觉得只向一个或两个Views生成的块中添加一些类就太过分了(顺便说一句,我检查了模块,而我觉得SELECT css_class, module, delta FROM {block_class}查询block_class_preprocess_block()就像一个过分的杀手,因为它检查了所有添加了类,即使该块被隐藏了...)。

所以我想从我自己的模块中解决它。


编辑

一个例子:

我的机器名称和添加的CSS类的视图: 视图-机器名称和类别

在检查器中生成的块的HTML代码: 查看-检查器中生成的块的HTML代码

Answers:


7

第一。您有“哈希”-因为您查看的计算机名太长。

其次-您可以添加自己的课程进行查看

在此处输入图片说明


您所关注的屏幕截图是视图块,对吗?
cherouvim 2012年

否-它在视图编辑页面上-admin / structure / views / view / [youviewname]
Gaydabura 2012年

1
“您有“哈希”-因为您查看的计算机名称太长。” -为何重要?我也可以将CSS样式表中的规则添加到非常长的类名中,也没有任何问题... 您标记的“ CSS类”部分是不正确的,因为这些类仅生成到“内容”部分中-这就是我开始的工作问题!所以我必须将类添加到内容的包装器中。查看我刚刚粘贴在原始问题中的屏幕截图。
Sk8erPeter

好。在这种情况下,最简单的方法是为块创建自定义模板-您要更改。该链接可能很有用drupal.org/node/1089656-它解释了模板名称建议
Gaydabura 2012年

但是这种方式我必须使用block--views--3d8f7966168beeec655c8ead69336789.tpl.php文件,在这种情况下,我就像在中使用if($variables['block']->delta == '3d8f7966168beeec655c8ead69336789')条件一样hook_preprocess_block()。我想避免这种情况,因为我认为可以在钩子中使用更易理解的名称。例如,如果我想将视图移动到具有相同参数的另一个视图中,我删除了前一个,但是使用了相同的计算机名称和CSS类,但是生成的唯一哈希发生了变化?在这种情况下,我将丢失修改。
Sk8erPeter

2

这是一个老问题,但是没有适当的答案。我遇到了同样的问题。我能想到的解决方案是CSS父选择器(尚不存在)或一些Drupal操作。

我添加了一个hook_preprocess_block,以将包装器CSS类添加到所有定义CSS类的视图块中。那不是小事,所以我将代码放在这里。它可能不适用于所有视图块,如果您对此代码有疑问,请随时进行更新并发布您自己的版本。

示例:CSS类“ test”的视图将包含在CSS类“ 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";
                }
            }
        }
    }
}


1

对我来说hook_preprocess_block()没用。(也许是因为我必须通过直接从模板文件添加块views_embed_view()。)

但是,hook_preprocess_views_view()只需简单检查一下是否$vars['view']->current_display可行:

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';
  }
}

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.