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

79

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).

epersonae
fuente
crear page--front.tpl.phpypage.tpl.php
M ama D

Respuestas:

69

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.

Descifrar
fuente
entonces, para la página de inicio, ¿utilizarías en if(drupal_is_front_page()) {lugar de if(drupal_get_path_alias [etc]?
epersonae
Sí, las condiciones dependen totalmente de usted. Simplemente podría hacer una $vars['#node']->nid == $nidverificación si lo desea.
Descifrar el
8
Descifrar, no puedo encontrar ningún fallo con su código. Pero espero que no le importe que le señale que, a menos que esté hablando de la configuración de permisos de Drupal, la forma en que desempeña el rol debería ser la forma en que se desplaza. ;-)
medden
2
FYI, estoy usando Drupal 7 y descubrí que necesitaba usarlo $vars['elements']['#node']->niden la búsqueda de alias. No hay #noderaíz en varsel último Drupal 7 por lo que parece.
Wes Johnson
¿No debería tener una función por delante de MYTHEME__preprocess_node ($ vars)? Veo todo el código allí solo en términos de funciones.
pal4life 05 de
16

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.

Budda
fuente
Uso Context Add Assets en literalmente todos los sitios web que hago, si te gustan los Context (que controlan cada sección de mis compilaciones) Add Assets es perfecto.
electblake
13

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.

Dave Reid
fuente
eso es básicamente lo que estaba haciendo ... y son casi 200 líneas, por lo que me pareció una buena idea moverlo a otro lado. (sí, probablemente debería ser más corto.
Ese
Por otro lado, su respuesta me inspiró a leer template.php en mi plantilla (niño Zen), lo que me llevó a la respuesta final.
Epersonae
7

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.

Camsoft
fuente
hook_init () se ejecuta en cada carga de página y, a menudo, varias veces (AHAH), ¿por qué no usar hook_preprocess_node () (ya sea en el tema o en un módulo) que solo se ejecuta cuando se procesa un nodo?
Descifrar el
Buen punto, no sabía que init se cargó varias veces.
Camsoft
Descifrar, he corregido mi ejemplo para utilizar la función de preproceso. ¡Aún aprendiendo!
Camsoft
Entonces, la siguiente pregunta sería por qué usar arg (1) para el nid cuando las variables de nodo se pasan a través de $ vars :) Lo que luego llevaría a la siguiente pregunta de cómo es esto diferente a mi respuesta: p
Decipher
Supongo que debería haber leído la documentación de hook_preprocess_node (). Estás absolutamente en lo correcto. epersonae, le sugiero que acepte la respuesta de Decipher.
Camsoft
7

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

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).

Paul Jones
fuente
3

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.

Druvision
fuente
2

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.

Warpstone
fuente
2

/ * 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
}
tal
fuente
2

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.

mezclador
fuente
El último fragmento de código es lo que necesitaba. Y funciona, es decir, después de eliminar las hojas de estilo [todas] [] = css / front.css de mi theme.info - Supongo que asumí erróneamente que necesitamos tener eso junto con las hojas de estilos [todas] [] = css / styles .css. También me preocupaba que, debido a que estoy anulando page.tpl.php con page - front.tpl.php, podría no funcionar, pero todo parece estar funcionando bien. Esto es realmente útil. ¡Gracias!
Sd1
Solo para asegurarse de que todos obtengan esta solución; asegúrese de eliminar styles.css (el valor predeterminado) y front.css de su archivo theme.info. Vacíe todos los cachés y debería estar listo.
Sd1
1

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.

Alexander Hripak
fuente
Y por supuesto que se necesita para calificar a sus selectores basado en los atributos del nodo, es decir, NID, el tipo de nodo, etc
Alexander Hripak
El problema con este enfoque es que afectará a todas las páginas del sitio con el CSS agregado aquí
Pal4life
1

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.

augusto
fuente
0

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

Markus Zerres
fuente
bienvenido a Drupal Answers! Esta respuesta ya fue proporcionada anteriormente por Dave Reid.
Kojo