Embed Size (px)
DESCRIPTION
Pasos necesarios para crear un sub-tema usando Bootstrap como tema base en Drupal 7.
Citation preview
¿Como crear sub-theme usando Bootstrap Drupal 7?
Verónica Karen Vedia FloresSuperSoft
¿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
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.
● 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
● Una vez copiado, cambiar el nombre de la carpeta bootstrap_subtheme, ejemplo: my_bootstrap_theme.
Métodos Bootstrap
Hay dos métodos para poder realizar el sub-theming:
1. Usando local LESS pre-processing del framework Bootstrap2. 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:
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'.
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:
- Al aplicar este subtema como tema por defecto del sitio, muestra el siguiente error, no te preocupes ;)
Aplicar el subtema
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!!!
Resultado: El sitio ya es responsivo
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
