it-swarm-es.com

¿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"? ¿Es CSS Injector lo que estoy buscando?

I ¡podría estar interesado en generalizar esto a otros nodos/secciones/etc., pero por el momento solo quiero manejar este elemento.

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

79
epersonae

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.

69
Decipher

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

25
rakke

Cree un Contexto para su página/sección y luego use el módulo Contexto Activos 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 usa ctools, todo esto también es exportable.

16
budda

Si es 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.

13
Dave Reid

Si el criterio para el cual agregar un estilo CSS depende de algunas propiedades de un nodo, entonces implementaría MYTHEME_preprocess_node(&$variables); uno de los valores pasados ​​a la función es $variables['node'] (para notar que no 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 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 obtiene $variables['is_front'], Pero en Drupal 7 no se pasa la misma variable; si necesita saber si la página es la página principal, debe usar drupal_is_front_page().

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

Puede crear un módulo personalizado y usar hook_preprocess_node () para cargar hojas de estilo de forma selectiva 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.

7
Camsoft

Para una forma de hacerlo basada en el administrador, miraría el módulo CSS . Agrega un campo donde puede agregar [~ # ~] css [~ # ~] al node/add y node/edit páginas.

CSS:

El módulo CSS agrega, para los usuarios con suficientes permisos 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).

5
Paul Jones

CodePerNode es genial, pero CSS Injector es más sencillo de instalar (no se necesitan bibliotecas). El módulo permite que el administrador de contenido agregue dinámicamente CSS a páginas específicas, sin tocar el código PHP o archivos INFO en absoluto. 15777 instalaciones 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.

3
Druvision

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

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.

2
mixerowsky

Como ya está utilizando paneles, puede ser más fácil agregar su CSS como estilo de panel para cada región del panel de su página de inicio. Puede definir un marcado personalizado allí y reutilizarlo 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.

2
Warpstone

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á en css/foo.css.

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

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

Luego, se beneficia 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.

1
Alexander Hripak

Aparte del enfoque 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.

1
augusto

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

0
Markus Zerres