viernes, 25 de enero de 2013

Instalar 960 grid system en Drupal 7

Muchas veces cuando estas diseñando una pagina web en Drupal, necesitas una libertad mayor que los templates típicos.
Una forma de poder liberarte de los templates es instalar un sistema de grid. Yo utilizo el 960 grid System. (Se puede descargar en 960.gs)

Para poder instalarlo es necesario instalar el theme Zen en Drupal. Esto es muy sencillo y esta en la pagina oficial de drupal. Lo descargamos y lo instalamos normalmente.

http://drupal.org/project/zen

Una vez instalado el theme, debemos copiar la carpeta STARTERKIT situada en nuestro-drupal/sites/all/themes/zen en el directorio nuestro-drupal/sites/all/themes.



Contenido de la carpeta zen.







Una vez copiada debemos de cambiarle el nombre, yo suelo ponerle gs960. Le podemos poner el nombre que queramos pero no puede empezar con un número.



Contenido de la carpeta themes.




Lo primero que hay que hacer es renombrar el archivo STARTERKIT.info.txt, situado dentro de la carpeta renombrada, con el nombre que le hemos puesto al nuestra carpeta, en mi caso sería gs960.info  y lo editamos con un editor de textos. Cambiamos las siguientes líneas:
 "name = Zen Sub-theme Starter Kit" por "name = gs960".
 "description = Read..." por  "description = Un sub-theme de Zen".

Ahora descomprimimos el archivo que nos hemos bajado de 960.gs. Una vez descomprimido tenemos que copiar la carpeta css, situada dentro de la carpeta code, a nuestro-drupal/sites/all/themes/gs960/css/ copiamos la carpeta entera, no es necesario cambiarle el nombre, aunque yo lo suelo hacer para distinguir los css normales de los del 960gs, en este caso no lo voy a hacer.





Contenido de la carpeta gs960/css.








Ahora tenemos que añadirle al sub-theme donde se encuentran los archivo css del sistema 960. Esto lo haremos modificando otra vez el archivo gs960.info.
buscamos la línea:
stylesheets[all][]   = css/layouts/responsive-sidebars.css
y la cambiamos por:
stylesheets[all][]   = css/css/960.css.

Ahora editamos los archivos template.php y theme-settings.php y sustituimos todos los STARTERKIT por gs960, lo mas fácil es que le demos a buscar y reemplazar.
 Ya tememos el subtheme con 960 incorporado ahora solo tenemos que elegirlo dentro del menú apariencia de drupal.

Se utiliza normalmente introduciendo las capas con las clases del sistema dentro de cada página, utilizando un poco de html. En la misma pagina de 960gs, se explica como se utiliza el sistema.
Si manejáis php podéis incorporar las clases a los templates de las paginas para así poder hacerlo todavía más flexible.

No hay comentarios:

Publicar un comentario