Pasos necesarios para crear un sub-tema usando Bootstrap como tema base en Drupal 7.

1. ¿Como crear sub-theme
usando Bootstrap Drupal 7?
Verónica Karen Vedia Flores
SuperSoft

2. ¿Como crear sub-theme usando Bootstrap
Drupal 7?
• Instalar el tema base para drupal 7 “bootstrap”:
https://drupal.org/project/bootstrap
● La versión que se esta usando del framework Bootstrap es 3
● Bootstrap requiere jQuery: instalar el modulo jquery_update
https://drupal.org/project/jquery_update/ y
asegurarse que este seleccionado la versión 1.7 o mayor

3. Empezamos a crear el sub-theme
● Copiar el subtema bootstrap_subtheme que se encuentra en el
tema base bootstrap y copiar en sites/all/themes o en tu
respectiva carpeta de temas.
● Una vez copiado, cambiar el
nombre de la carpeta
bootstrap_subtheme, ejemplo:
my_bootstrap_theme.
● A continuación, cambiar el nombre del archivo
bootstrap_subtheme.info.starterkit para que coincida
con el nombre de la carpeta, como:
my_bootstrap_theme.info.
● Personalizar los atributos del archivo .info: Nombre, descripción

4. Métodos Bootstrap
Hay dos métodos para poder realizar el sub-theming:
1. Usando local LESS pre-processing del framework Bootstrap
2. Usando el built-in CDN
Para este caso aplicaremos el método 1:
Método 1: Descargar el framework Bootstrap
- Descargar y extraer los archivos de LatestBootstrapsource
https://github.com/twbs/bootstrap/releases versión 3.1.1 en su
nuevo sub-tema:

5. Instalando el modulo “Less”
- https://drupal.org/project/less
- Instalamos sus dependencias:
• Descargar e Instalar el módulo LibrariesAPI.
• Descargar lessphp (lessphp.gpeasy.com) y descomprimir para que
'lessc.inc.php' se encuentre en:
'sites/all/libraries/lessphp/lessc.inc.php'.

6. Uso del módulo Less
- En el archivo .info del sub-tema cambiar css/style.css a
less/style.less y descomentar las siguientes lineas quedando asi:

7. Aplicar el subtema
- Al aplicar este subtema como tema por defecto del sitio, muestra el
siguiente error, no te preocupes ;)

8. Solución: Aplicar el siguiente parche
- El archivo variables.less produce un error de compilación para
ello existe un parche.
- Agregar la línea marcada en rojo en el archivo:
my_bootstrap_theme/less/bootstrap.less
- Limpiar cache
- Listo, tu sitio es responsivo!!!

9. Resultado: El sitio ya es responsivo

10. Para personalizar el ancho del sitio
● Por defecto Bootstrap tiene un ancho de 1170px que viene de
(1140px + 30px) los 30px son los paddings totales que pone al
sitio, 15px a cada extremo.
● Para cambiar el tamaño del sitio solo se debe cambiar en el
siguiente archivo:
my_bootstrap_theme/less/variables.less

11. Gracias! ;)
veronica.vedia@supersoftinc.com
@veronicanerak
http://supersoftinc.com/
SuperSoft