March 17, 2014 07:24 AM

Sistema CSS de Drupal 7

Drupal 7 da la posibilidad  a los desarrolladores de módulos de introducir ficheros CSS mediante la función drupal_add_css. Esta funcionalidad ha conducido a que cada módulo introduzca un fichero adicional, de forma que en una instalación tenemos:

• node.css
• comment.css
• system.css
• system-menus.css
• etc

Esto aunque pudiera parecer un problema desde el punto de vista del rendimiento (multitud de solicitudes HTTP), no lo es porque gracias a la opción Aggregate CSS de Drupal 7 (admin/config/development/performance) que permite reunir todos los ficheros en uno sólo para realizar solo una solicitud HTTP, impresicindible para el paso a producción.

En muchas ocasiones, al crear un tema de Drupal 7 nos encontramos con que para empezar desde cero no sólo basta con CSS reset  si no que es preciso reescribir las asignaciones CSS realizadas en cada uno de los módulos.

Deshabilitar CSS en Drupal 7, el modo incorrecto

Es bastante común (ver enlace), y de hecho se utiliza en temas base como Versatile (ver fichero) , redeclarar en el fichero .info de nuestro tema Drupal los ficheros CSS que queremos deshabilitar:

stylesheets[all][] = node.css
stylesheets[all][] = date.css

Esta forma de hacerlo es incorrecta debido a que al solicitar nuevo contenido vía AJAX los ficheros vuelven a aparecer (ver video). Se trata de una incidencia que está pendiente de ser solucionada.

La solución

Hasta entonces existe una forma alternativa de hacerlo que es totalmente funcional, para ello es preciso implementar en nuestro template.php el hook hook_css_alter y desasignar los ficheros que no deseemos:

function custom_theme_css_alter(&$css) {
  // Solution till http://drupal.org/node/967166 is fixed
  unset($css[drupal_get_path('module', 'node') . '/node.css']);
  unset($css[drupal_get_path('module', 'date_api') . '/date.css']);
}

JavaScript

Ocurre lo mismo para ficheros JavaScript, en ese caso hay que implementar hook_js_alter.