Un modo per aggiungere CSS per una singola pagina / nodo?

Sto ripulendo i miei grandi fogli di stile folli (forse pertinenti a una domanda futura) e mi chiedo il modo migliore per aggiungere CSS personalizzati a un nodo o una pagina specifici.

In particolare, la home page del mio sito di lavoro è una pagina del pannello e ha un sacco di stili diversi. In questo momento il CSS è appena incluso nel foglio di stile del tema principale.

C'è un modo per dire "se questo è il nodo Foo, allora aggiungi foo.css"? È CSS iniettore quello che sto cercando?

Io potrei essere interessato a generalizzare questo ad altri nodi / sezioni / etc, ma al momento voglio solo gestire questo un elemento.

Quello che ho finito per fare.

Sto usando un sottotema Zen e ho scoperto, in realtà, leggendo template.php che c'è un codice commentato per includere fogli di stile condizionali. Il codice seguente ha fatto esattamente ciò di cui avevo bisogno:

if (drupal_is_front_page()) {
  drupal_add_css(path_to_theme() . "/foo.css", 'theme','all'); 
}

(Linea 80 in un file template.php Zen di serie, FWIW.)

Questo è il genere di cose che farei con il codice, ma è perché è così che faccio.

Nel template.php vorrai qualcosa del tipo:

function MYTHEME_preprocess_node($vars) {
  if (drupal_get_path_alias("node/{$vars['#node']->nid}") == 'foo') {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/css/foo.css");
  }
}

Sostituisci foo con valori relativi al tuo codice.

Puoi dare un'occhiata al modulo Code per Node . È anche presente in questo post del blog .

Crea un contesto per la tua pagina / sezione e quindi utilizza il modulo Risorse contestuali per caricare CSS e / o javascript per quel determinato contesto.

Contesto:

Il contesto consente di gestire condizioni e reazioni contestuali per diverse parti del sito. Puoi pensare a ciascun contesto come a una "sezione" del tuo sito. Per ogni contesto, puoi scegliere le condizioni che attivano l'attivazione di questo contesto e scegliere diversi aspetti di Drupal che dovrebbero reagire a questo contesto attivo.

Pensa alle condizioni come a un insieme di regole che vengono verificate durante il caricamento della pagina per vedere quale contesto è attivo. Tutte le reazioni associate a contesti attivi vengono quindi attivate.

Contesto Aggiungi risorse:

Il contesto Aggiungi risorse ti consente di farlo. Ha un'interfaccia utente facile da usare per permetterti di fare tutto questo senza scrivere alcun codice. Poiché utilizza ctools tutto ciò è anche esportabile.

Se si tratta di una piccola quantità di CSS, forse potresti prendere in considerazione la possibilità di rendere i selettori CSS basati sul nodo e includere i CSS nel CSS del tuo tema? Drupal 7 fornisce il selettore body.page-node-NODEID e Zen per Drupal 6 fornisce classi CSS del corpo simili.

È possibile creare un modulo personalizzato e utilizzare hook_preprocess_node () per caricare fogli di stile in modo selettivo in base all'ID nodo.

Ecco un esempio:

function MYMODULE_preprocess_node($vars) {
  $nid = 3;
  if (arg(0) == 'node' && is_numeric(arg(1)) && arg(1) == $nid) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}

Sostituisci MYMODULE con il nome del tuo modulo e sostituisci MYTHEME con il nome del tema che contiene il file css.

Se i criteri per i quali l'aggiunta di uno stile CSS dipende da alcune proprietà di un nodo, implementerei MYTHEME_preprocess_node(&$variables); uno dei valori passati alla funzione è $variables['node'](notare che non lo è $variables['#node']).

MYTHEME_preprocess_node(&$variables) {
  if ($variables['node']->nid == 3) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}

Se i criteri non dipendono da nessuna proprietà del nodo, allora implementerei MYTHEME_preprocess_page(&$variables); $variables['node']contiene un oggetto nodo, se la pagina visualizzata è una pagina nodo. In Drupal 6, anche la funzione di processo ottiene $variables['is_front'], ma in Drupal 7 la stessa variabile non viene passata; se devi sapere se la pagina è la prima pagina, devi usare drupal_is_front_page().

MYTHEME_preprocess_page(&$variables) {
  if ($variables['is_front']) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}

Per un modo basato su admin per farlo guarderei il modulo CSS . Aggiunge un campo in cui è possibile aggiungere CSS alle pagine node/adde node/edit.

CSS:

Il modulo CSS aggiunge, per gli utenti con autorizzazioni sufficienti e nodi abilitati, un campo CSS nella pagina di creazione del nodo.

Gli utenti possono inserire regole CSS nel campo del nodo CSS e tali regole verranno analizzate nella visualizzazione del nodo.

In questo modo gli utenti esperti CSS potrebbero creare progetti complessi basati su CSS per i contenuti dei nodi.

Importante: notare che le autorizzazioni di modifica CSS devono essere concesse solo a utenti fidati (amministratori). Gli utenti dannosi che dispongono di questa autorizzazione potrebbero interrompere la progettazione del sito e introdurre anche problemi di sicurezza (XSS).

CodePerNode è eccezionale, ma CSS Injector è più semplice da installare (non sono necessarie librerie). Il modulo consente al gestore dei contenuti di aggiungere dinamicamente CSS a pagine specifiche, senza toccare affatto il codice PHP o i file INFO. 15777 installazioni non possono essere sbagliate: questa è una prova sociale che funziona questo modulo. Il CSS è anche memorizzato nella cache con il normale sistema di memorizzazione nella cache.

Dal momento che stai già utilizzando i pannelli, potrebbe essere più semplice aggiungere il tuo CSS come stile pannello per ogni area del pannello della home page. Puoi definire un markup personalizzato lì e riutilizzarlo sul tuo sito.

Puoi anche andare alla sezione Generale della regola della variante del gestore della pagina per la tua home page. C'è una sezione qui per aggiungere ID CSS e regole solo per il pannello corrente.

Nota: questo è tutto in D7, quindi potrebbe essere che questo approccio sia supportato meglio dai pannelli rispetto alle versioni precedenti.

/ * Un esempio che utilizza il tema Bartik per aggiungere CSS in base al tipo di contenuto * /

function bartik_preprocess_node(&$variables) {
if(!empty($variables['node'])) {
    if($variables['node']->type == 'my_custom_content_type')
    {
      drupal_add_css(drupal_get_path('theme', 'any_theme_name') . "/css/foo.css");   
    }
  }
  // Some other code here
}

Prova ad aggiungere questo nel tuo file 'template.php':

function mytheme_preprocess_page (&$variables)
{
  if (drupal_is_front_page()) {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/front.css');
  } 
}

Sostituisci "mytheme" con il nome della directory del tuo tema e "/css/front.css" con il percorso in cui si trova il tuo file CSS.

Per cancellare il file 'front.css' da altre pagine, prova ad aggiungere a 'template.php':

function hook_css_alter(&$css) {
  if (!drupal_is_front_page()) {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/front.css']);
  }
}

Ancora una volta, sostituisci "mytheme" con il nome della directory dei temi.

Se hai bisogno di deselezionare 'styles.css' dalla prima pagina basta unire questi due codici.

Supponiamo che sia necessario "front.css" senza "styles.css" sulla prima pagina e "style.css" senza "front.css" su tutte le altre pagine. Il codice sarà simile al seguente:

function mytheme_preprocess_page (&$variables)
{
  if (drupal_is_front_page()) {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/front.css');
  } 
  else {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/styles.css');
  }
}

function hook_css_alter(&$css) {
  if (drupal_is_front_page()) {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/styles.css']);
  }
  else {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/front.css']);
  } 
}

Inoltre, sostituisci "mytheme".

Spero che questo possa essere utile

Avrei saltato del tutto toccando template.php e solo aggiungendo un altro elemento nel file .info del tuo tema

Supponi che il tuo foglio di stile sia presente css/foo.css.

Ecco come apparirebbe il tuo file theme_name.info:

name = Theme Name
...
stylesheets[all][] = css/foo.css

Quindi beneficerai di averlo memorizzato nella cache con i fogli di stile principali e dato che presumo che sia per la tua home page avrebbe senso.

A parte l'approccio Drupal, quando hai solo bisogno di un breve pezzo di CSS all'interno del tuo corpo HTML5, hai l'attributo con ambito CSS. Vedi https://stackoverflow.com/a/4607092/195812

Questa soluzione ti salverà dalla modifica del codice e dall'installazione di più moduli

È possibile stampare il nodo della pagina nel tag body

<body page-node-26419 ...>

Quindi puoi limitare

body.page-node-26419 {
    background: red
}

Questo è utile per piccoli cambiamenti rapidi