Crear un sub-tema Bootstrap en Drupal

Bootstrap

Bootstrap es uno de los temas base mas utilizados para Drupal 7. Los archivos de este tema no están a la vista dentro del tema, por lo que empezar con el subtema puede ser mas complicado de lo que realmente es.

Para ahorrar algo de frustración y como referencia para nuestros usuarios, hemos preparado una guía paso a paso para la creación de su propia sub-tema. Nuestro método preferido es compilar Bootstrap de la fuente podemos tomar ventaja de los archivos LESS.

Visión General

  1. Descargar tema base
  2. Crear el directorio del sub-tema y copiar archivos
  3. Configurar el archivo .info
  4. Descargar archivos fuente Bootstrap
  5. Compilar los archivos LESS
  6. Activar sub-tema

1. Descargar tema base

  1. Descargar Drupal Bootstrap theme
    • Extraer/subir a su carpeta sites/all/themes
    • No hay necesidad de activar el tema. Sólo necesitamos esto para establecer el subtema
  2. Descargar/Habilitar jQuery Update
    • Extraer/subir a su carpeta sites/all/themes
    • Cambiar jquery a 1.9
    • Cambiar a jquery 1.5 la version para el administrador, para eviar conflictos con el AJAX.


Jquery update
Configuracion de Jquery Update

2. Crear el directorio del sub-tema y copiar archivos

  1. Crear una nueva carpeta para su subtema dentro de sites/all/themes.
    • En nuestro ejemplo, vamos a llamar a nuestro sub-tema mi_subtema, por lo que debe tener un directorio vacío en sites/all/themes/my_subtema.
  2. Copiar todos los archivos de sites/all/themes/bootstrap/starterkits/less de base a sites/all/themes/my_subtheme
  3. Su directorio subtema debería tener este aspecto:


Subtheme Folder
Carpeta del subtema

3. Configurar el archivo .INFO

  • Renombrar bootstrap_subtheme.info.starterkit a mi_subtema.info. Recuerde reemplazar "mi_subtema" con el nombre de su propia sub-tema.
  • Editar mi_subtema.info con su editor de texto de elección y darle un nombre único y descripción:
          name = My Awesome Bootstrap subtheme
          description = A Bootstrap Sub-theme customized for this particular project
          core = 7.x
          base theme = bootstrap 
        
  • Descomentar las líneas de scripts. Puesto que vamos a compilar desde el código fuente y no usar el valor por defecto "Bootstrap CDN", hágalo mediante la eliminación de los puntos y comas; frente a cada uno de los archivos javascript:
          scripts[] = 'bootstrap/js/affix.js'
          scripts[] = 'bootstrap/js/alert.js'
          scripts[] = 'bootstrap/js/button.js'
          scripts[] = 'bootstrap/js/carousel.js'
          scripts[] = 'bootstrap/js/collapse.js'
          scripts[] = 'bootstrap/js/dropdown.js'
          scripts[] = 'bootstrap/js/modal.js'
          scripts[] = 'bootstrap/js/tooltip.js'
          scripts[] = 'bootstrap/js/popover.js'
          scripts[] = 'bootstrap/js/scrollspy.js'
          scripts[] = 'bootstrap/js/tab.js'
          scripts[] = 'bootstrap/js/transition.js'
        
  • Desactive Bootstrap CDN, Quitando el punto y coma al inicio:
          settings[bootstrap_cdn] = ''
        

4. Descargar los archivos fuente de Bootstrap

Descargar fuente Bootstrap y subirlo a su carpeta de subtema. Los nombres de las carpetas pueden comenzar a conseguir confundir aquí porque la palabra "bootstrap" es parte del nombre del tema, así como el código fuente. Asegúrese de poner los archivos dentro de la carpeta de temas. Se debe tener este aspecto cuando haya terminado:

  mi_subtema/bootstrap/
  ├── less/
  ├── js/
  ├── fonts/
  ├── dist/
  │   ├── css/
  │   ├── js/
  │   └── fonts/
  └── docs/
      └── examples/

Las únicas carpetas que necesita de la fuente son LESS, JS, y fuentes. El resto es opcional.

5. Compilar los archivos LESS

Compilar los archivos LESS para crear el style.css, que contiene todo el CSS de Bootstrap y su propio código personalizado.

  lessc less/style.less > css/style.css

6. Activar el Sub-Tema

En apariencia, se activa y se selecciona como predeterminado el sub-tema, si todo ha ido bien, debería ver los estilos Bootstrap cargados en el frontend del CMS.

Como podemos ver, la creación de un sub-tema Drupal Bootstrap puede parecer tedioso en un principio pero es realmente simple. Si usted desarrolla muchos proyectos, le recomendamos crear su propio repositorio git con todos los archivos y configuraciones necesarias. Mantenga un repositorio de un "Bootstrap Sub Tema" genérico que puede ser habilitado y usado cuantas veces lo requiera, esto le ayudará a ahorrar mucho tiempo.