Come aggiungere classi CSS a un blocco generato da Views? (NON al suo contenuto generato, il blocco stesso!)


8

Non so perché, ma Views non aggiunge i nomi di classe CSS "leggibili dall'uomo" (come ad esempio il nome della macchina della vista) ai blocchi che crea ( aggiunge le sue classi solo alla parte "contenuto" generata quando aggiunta di classi alla parte " Classe CSS " nell'editor della vista (vedere le schermate seguenti!)).
Aggiunge solo le solite block block-viewse possibilmente contextual-links-regionclassi CSS ai blocchi e genera un ID univoco (non classe) come questo: block-views-3d8f7966168beeec655c8ead69336789(perché il suo delta è questo codice hash generato).
Non ha senso scrivere regole CSS per queste classi e ID (come .block-views-3d8f7966168beeec655c8ead69336789 { /* ... */ }), perché queste classi / ID potrebbero cambiare quando si modifica il blocco Views.

Come posso aggiungere alcune classi CSS personalizzate in un'implementazione di hook_block_view_alter(), se non riesco nemmeno a identificare questi blocchi a causa del loro delta hash generato?


Non voglio usare Block Class , perché ritengo che sia un overkill solo per l'aggiunta di alcune classi a uno o due blocchi generati da Views (a proposito ho controllato il modulo e mi sento SELECT css_class, module, delta FROM {block_class}interrogato block_class_preprocess_block()come un overkill, perché controlla TUTTI i classi aggiunte, anche se il blocco è nascosto ...).

Quindi vorrei risolverlo dal mio modulo.


MODIFICARE

Un esempio:

La mia visione con il nome della macchina e le classi CSS aggiunte: Visualizza: nome e classe della macchina

Il codice HTML del blocco generato nella finestra di ispezione: Visualizza: codice HTML del blocco generato nella finestra di ispezione

Risposte:


7

Primo. Hai "hash" - perché visualizzi il nome della macchina è troppo lungo.

Secondo: puoi aggiungere le tue classi da visualizzare

inserisci qui la descrizione dell'immagine


Lo screenshot che hai riguarda i blocchi di visualizzazione, giusto?
Cherouvim,

no - è sulla pagina di modifica della visualizzazione - admin / struttura / visualizzazioni / vista / [nomeutente]
Gaydabura,

1
"Hai" hash "- perché visualizzi il nome della macchina è troppo lungo." - e perché è importante? Posso aggiungere regole nei fogli di stile CSS anche ai nomi di classi DAVVERO lunghe senza problemi ... La parte "Classe CSS" che hai contrassegnato NON è corretta, perché queste classi sono generate solo nella parte "contenuto" - questo è ciò che ho iniziato domanda con! Quindi devo aggiungere delle classi al wrapper dei contenuti. Guarda gli screenshot che ho appena incollato nella domanda originale.
Sk8erPeter,

ok. in questo caso il modo più semplice è quello di creare modelli personalizzati per il blocco: vuoi cambiare. questo link può essere utile drupal.org/node/1089656 - spiega i suggerimenti per i nomi dei modelli
Gaydabura,

Ma in questo modo ho dovuto usare un block--views--3d8f7966168beeec655c8ead69336789.tpl.phpfile, e in questo caso, sono allo stesso punto come se avessi usato una if($variables['block']->delta == '3d8f7966168beeec655c8ead69336789')condizione in hook_preprocess_block(). Questo è ciò che volevo evitare, perché pensavo di poter usare un nome più leggibile dall'uomo nel mio hook. Ad esempio, se volessi spostare la vista in un'altra con gli stessi parametri, elimino la precedente, ma uso lo stesso nome macchina e le stesse classi CSS, ma l'hash univoco generato cambia? In questo caso, perdo le mie modifiche.
Sk8erPeter,

2

Questa è una vecchia domanda, ma non esiste una risposta adeguata. Mi sono imbattuto nello stesso problema. Le soluzioni che mi sono venute in mente sono state il selettore genitore CSS (che non esiste ancora) O qualche manipolazione di Drupal.

Ho aggiunto un hook_preprocess_block per aggiungere una classe CSS wrapper a tutti i blocchi di vista che definiscono una classe CSS. Non è banale, quindi inserirò il mio codice qui. Potrebbe non funzionare con tutti i blocchi di visualizzazione, se hai un problema con questo codice, sentiti libero di aggiornarlo e pubblicare la tua versione.

Esempio: la vista con la classe CSS "test" sarà contenuta in un blocco con la classe 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

Per me hook_preprocess_block()non ha funzionato. (Forse perché ho dovuto aggiungere il blocco direttamente da un file modello tramite views_embed_view().)

Tuttavia, hook_preprocess_views_view()con un semplice controllo per $vars['view']->current_displayha funzionato:

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.