Instalar Bootstrap 3.3.4 en Drupal

Paquetes

• El theme Bootstrap para Drupal
• El código fuente de la versión 3.3.4 de Bootstrap
• El código fuente de less.php

Procedimiento

Descargar el theme Bootstrap para Drupal y descomprimirlo dentro el directorio theme.

Dentro de theme/bootstrap, copiar el directorio bootstrap_subtheme dentro theme y cambiarle el nombre con el de nuestro nuevo theme (en este ejemplo: mastercheff)

# cp -pR theme/bootstrap/bootstrap_subtheme theme/
# mv theme/bootstrap_subtheme theme/masterchef
# mv theme/masterchef/bootstrap_subtheme.info.starterkit theme/mastercheff/masterchef.info

Editar las propiedades de nuestro nuevo theme

# vi theme/mastercheff/masterchef.info

name = masterchef
description = A Bootstrap Sub-theme.
core = 7.x
base theme = bootstrap


;;;;;;;;;;;;;;;;;;;;;
;; Regions
;;;;;;;;;;;;;;;;;;;;;

regions[navigation]     = 'Navigation'
regions[header]         = 'Top Bar'
regions[highlighted]    = 'Highlighted'
regions[help]           = 'Help'

regions[node_header]  = 'Node header'

regions[content]        = 'Content'
regions[sidebar_first]  = 'Primary'
regions[sidebar_second] = 'Secondary'

regions[additional_info]  = 'Additional information'

regions[tweets]           = 'tweets'

regions[footer]         = 'Footer'
regions[page_top]       = 'Page top'
regions[page_bottom]    = 'Page bottom'


;;;;;;;;;;;;;;;;;;;;;
;; Stylesheets
;;;;;;;;;;;;;;;;;;;;;

stylesheets[all][] = less/style.less

; ;;;;;;;;;;;;;;;;;;;;;
; ;; Scripts
; ;;;;;;;;;;;;;;;;;;;;;
; 

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'

Descargar y descomprimir la versión 3.3.4 del código fuente de Bootstrap dentro theme/masterchef

Descargar y descomprimir el código fuente de less.php dentro sites/all/libraries/lessphp

Agregar las nuevas variables no definidas aún en la release del theme de Bootstrap en el archivo masterchef/less/variables.less

@link-hover-decoration: none;
@dl-horizontal-offset: 0;

@form-group-margin-bottom: 0;
@input-border-radius-small: 0;
@input-border-radius-large: 0;
@padding-xs-vertical: 0;
@padding-xs-horizontal: 0;
@icon-font-svg-id: 0;
@navbar-collapse-max-height: 0;
@grid-float-breakpoint-max: 0;
@breadcrumb-padding-vertical: 0;
@breadcrumb-padding-horizontal: 0;

@pagination-color: @text-color;
@pagination-hover-color: @text-color;
@pagination-hover-border: 0;
@pagination-active-border: 0;
@pagination-disabled-bg: none;
@pagination-disabled-border: 0;

@pager-bg: none;
@pager-border: 0;
@pager-hover-bg: 0;

@progress-border-radius: 0;

@list-group-link-hover-color: @link-color;
@list-group-disabled-bg: inherit;
@list-group-disabled-color: inherit;
@list-group-disabled-text-color: inherit;
@list-group-active-text-color: inherit;

@panel-body-padding: 0;
@panel-heading-padding: 0;
@panel-footer-padding: 0;

@well-border: 0;

@modal-backdrop-opacity: 0.8;
@modal-lg: 900px;
@modal-md: 720px;
@modal-sm: 400px;

@tooltip-opacity:       1;

@blockquote-font-size: @font-size-base;
@kbd-color: #fff;
@kbd-bg: #333;
@cursor-disabled: not-allowed;

Refrescar less haciendo click en Flush LESS Files en admin/config/development/less y comprobar que no se verifiquen errores.

Agregar un archivo javascript al theme de Bootstrap

Agregar la siguiente función en el archivo masterchef/template.php

function masterchef_preprocess_node(&$vars) {
  if ($vars['node']->type == 'article') {
    drupal_add_library('system', 'jquery.cookie');
    $theme_path = drupal_get_path('theme', 'masterchef');
    drupal_add_js($theme_path . '/js/node-article.js');
  }
}

Aprovechando la misma función, es posible indicar a Drupal un nuevo archivo tpl para diseñar un determinado tipo de contenido.

function masterchef_preprocess_node(&$vars) {
  if ($vars['node']->type == 'article') {
    drupal_add_library('system', 'jquery.cookie');
    $theme_path = drupal_get_path('theme', 'masterchef');
    drupal_add_js($theme_path . '/js/node-article.js');
    $variables['theme_hook_suggestions'][] = 'page__type_' . $vars['node']->type;
  }
}

Luego de agregar una nueva entrada al array theme_hook_suggestions, crear el archivo theme/system/page--type-article.tpl.php. Notar que lo que dentro la función se indica con un guión bajo, en el nombre del archivo se transforma en un guión.

Para agregar un archivo js en todo el sitio (no solo para un tipo de contenido como en el caso anterior) utilizar:

function masterchef_preprocess_page(&$variables) {
  drupal_add_js(drupal_get_path('theme', 'masterchef') .'/custom.js', 'file');
}