¿Alguna forma de agregar CSS para una sola página / nodo?

Estoy limpiando mis grandes hojas de estilo locas (posiblemente pertinentes para una pregunta futura) y me pregunto la mejor manera de agregar CSS personalizado a un nodo o página específicos.

En particular, la página de inicio de mi sitio de trabajo es una Página de Panel y tiene muchos estilos diferentes. En este momento, el CSS solo se incluye con la hoja de estilo del tema principal.

¿Hay alguna manera de decir, "si este es el nodo Foo, entonces agregue foo.css"? ¿ CSS Injector es lo que estoy buscando?

Yo podría estar interesado en generalizar esto a otros nodos / secciones / etc, pero por el momento sólo quiero manejar esto un artículo.

Lo que terminé haciendo.

Estoy usando un subtema Zen, y descubrí en realidad leyendo a través de template.php que hay algún código comentado para incluir hojas de estilo condicionales. El siguiente código hizo exactamente lo que necesitaba:

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

(Línea 80 en un archivo Zen template.php, FWIW).

Este es el tipo de cosas que haría por código, pero eso es porque esa es la forma en que ruedo.

En template.php querrás algo como:

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");
  }
}

Reemplace foo con valores relacionados con su propio código.

Puede echar un vistazo al módulo Código por nodo . También aparece en esta publicación de blog .

Cree un contexto para su página / sección y luego use el módulo de Context Assets para cargar CSS y / o JavaScript para ese contexto dado.

Contexto:

El contexto le permite gestionar condiciones contextuales y reacciones para diferentes partes de su sitio. Puede pensar que cada contexto representa una "sección" de su sitio. Para cada contexto, puede elegir las condiciones que activan este contexto para estar activo y elegir diferentes aspectos de Drupal que deberían reaccionar a este contexto activo.

Piense en las condiciones como un conjunto de reglas que se verifican durante la carga de la página para ver qué contexto está activo. Cualquier reacción asociada con contextos activos se dispara.

Contexto Agregar activos:

Contexto agregar activos le permite hacer esto. Tiene una interfaz de usuario fácil de usar que le permite hacer todo esto sin escribir ningún código. Debido a que utiliza ctools, todo esto también es exportable.

Si se trata de una pequeña cantidad de CSS, ¿tal vez considere hacer sus selectores de CSS basados ​​en el nodo e incluir el CSS en el CSS de su tema? Drupal 7 proporciona el selector body.page-node-NODEID, y Zen para Drupal 6 proporciona clases CSS de cuerpo similares.

Puede crear un módulo personalizado y usar hook_preprocess_node () para cargar hojas de estilo selectivamente en función de la identificación del nodo.

Aquí hay un ejemplo:

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");
  }
}

Reemplace MYMODULE con el nombre de su módulo y reemplace MYTHEME con el nombre del tema que contiene el archivo css.

Si el criterio para el cual agregar un estilo CSS depende de algunas propiedades de un nodo, entonces lo implementaría MYTHEME_preprocess_node(&$variables); uno de los valores pasados ​​a la función es $variables['node'](para notar que no lo es $variables['#node']).

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

Si los criterios no dependen de ninguna propiedad de nodo, entonces lo implementaría MYTHEME_preprocess_page(&$variables); $variables['node']contiene un objeto de nodo, si la página que se muestra es una página de nodo. En Drupal 6, la función de proceso también se obtiene $variables['is_front'], pero en Drupal 7 no se pasa la misma variable; si necesita saber si la página es la portada, debe usarla drupal_is_front_page().

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

Para una forma de hacerlo basada en el administrador, miraría el módulo CSS . Agrega un campo donde puede agregar CSS a las páginas node/addy node/edit.

CSS:

El módulo CSS agrega, para usuarios con permisos suficientes y nodos habilitados, un campo CSS en la página de creación de nodos.

Los usuarios pueden insertar reglas CSS en el campo del nodo CSS y esas reglas se analizarán en la visualización del nodo.

De esta forma, los usuarios experimentados de CSS pueden crear diseños complejos basados ​​en CSS para el contenido de los nodos.

Importante: tenga en cuenta que los permisos de edición de CSS deben otorgarse solo a usuarios confiables (administradores). Los usuarios malintencionados que tienen este permiso pueden romper el diseño de su sitio y también presentar problemas de seguridad (XSS).

CodePerNode es excelente, pero CSS Injector es más sencillo de instalar (no se necesitan bibliotecas). El módulo permite al administrador de contenido agregar dinámicamente CSS a páginas específicas, sin tocar el código PHP o los archivos INFO. Las instalaciones de 15777 no pueden estar equivocadas: esta es una prueba social de que este módulo funciona. El CSS también se almacena en caché con el sistema de almacenamiento en caché normal.

Como ya está utilizando paneles, puede ser más fácil agregar su CSS como estilo de panel para cada región de su panel de página de inicio. Puede definir marcas personalizadas allí y reutilizarlas en su sitio.

También puede ir a la sección General de la regla de variantes del administrador de página para su página de inicio. Aquí hay una sección para agregar ID de CSS y reglas solo para el panel actual.

Nota: todo esto está en D7, por lo que podría ser que este enfoque sea mejor soportado por los paneles que en versiones anteriores.

/ * Un ejemplo que usa el tema bartik para agregar CSS basado en el tipo de contenido * /

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
}

Intente agregar esto en su archivo 'template.php':

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

Reemplace 'mytheme' con el nombre de su directorio de temas y '/css/front.css' con la ruta donde está su archivo CSS.

Para desarmar el archivo 'front.css' de otras páginas, intente agregarlo a 'template.php':

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

Nuevamente, reemplace 'mytheme' con el nombre de su directorio de temas.

Si necesita desarmar 'styles.css' de la página principal, simplemente combine estos dos códigos.

Supongamos que necesita 'front.css' sin 'styles.css' en la página principal y 'style.css' sin 'front.css' en todas las demás páginas. El código se verá así:

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

Además, reemplace 'mytheme'.

Espero que esto sea útil.

Hubiera omitido tocar template.php por completo y simplemente agregar otro elemento en el archivo .info de su tema

Digamos que su hoja de estilo está adentro css/foo.css.

Así es como se vería su archivo theme_name.info:

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

Entonces se beneficiará de tenerlo en caché con las principales hojas de estilo, y dado que supongo que esto es para su página de inicio, tendría sentido.

Aparte del enfoque de Drupal, cuando solo necesita un pequeño fragmento de CSS dentro de su cuerpo HTML5, tiene el atributo de alcance CSS. Ver https://stackoverflow.com/a/4607092/195812

Esta solución le ahorrará editar código e instalar más módulos.

Puede imprimir el nodo de la página en la etiqueta del cuerpo

<body page-node-26419 ...>

Entonces puedes restringir

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

Esto es útil para cambios rápidos menores