Algunos tips comunes para personalizar tu tema usando Bootstrap 3

1. Tips para Bootstrap 3
Drupal 7
Ruth Rocha Bustamante
Supersoft

2. Responsive Images
Las imágenes en Bootstrap 3 se pueden hacer
responsivas agregando esta clase img­responsive.
al tag <img>

3. - Añadir la función preprocess en template.php,
ubicado en: site/all/themes/mitema/.
<?php
/**
*
*/
function
mitema_preprocess_image_style(&$vars)
{
$vars['attributes']['class'][] =
'img­responsive';
}
?>

4. Responsive Video
Para hacer responsivos nuestros videos se debe
agregar en nuestros archivo mitema.less ubicado
en: site/all/themes/mitema/less el
siguiente código:

5. .player {
clear: both;
overflow:hidden;
padding­bottom:
56.25%;
padding­top:
60px;
position:relative;
height:0;
}
.player iframe,
.player object,
.player embed {
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}

6. Responsive Tables
El contenido de la tabla se desplazará
horizontalmente en dispositivos pequeños (menores
a 768px).

7. Para crear tablas responsivas:
-Agregar un div con la clase table­responsive
que contenga a <table>
-Agregar la clase table al tag <table>
El marcado que obtendremos una ves agregada las
clases es el siguiente:
<div class="table­responsive">
<table class="table">
.....
</table>
</div>

8. Para agregar las clases:
- Crear un archivo mitema.js en
site/all/themes/mitema/js y agregar el
siguiente código:
(function($) {
Drupal.behaviors.mitemaBehavior = {
attach: function (context, settings)
{
//code starts
$("table").addClass('table');
$('.table').wrap('<div
class="table­responsive"></
div>');
//code ends
}
};
})(jQuery);

9. Modificar el número de columnas en
bootstrap 3 drupal 7
-Añadir una función en template.php, ubicado en
sites/all/themes/mitema/

10. function
mitema_preprocess_page(&$variables) {
if (!empty($variables['page']
['sidebar_first']) && !
empty($variables['page']
['sidebar_second'])) {
$variables['content_column_class']
= ' class="col­sm­4"';
}
elseif (!empty($variables['page']
['sidebar_first']) || !
empty($variables['page']
['sidebar_second'])) {
$variables['content_column_class']
= ' class="col­sm­8"';
}
else {
$variables['content_column_class']
= ' class="col­sm­12"';
}
}

11. -Editar el archivo page.tpl.php ubicado en
sites/all/themes/mitema/templates
cambiamos a col-sm-4 en los sidebar first y second.

12. Gracias por su atención!!!
ruth.rocha@supersoftinc.com
@ruthrochab
http://supersoftinc.com/
Supersoft