CSS & maquetación

Front-end: Títulos multi linea con padding por cada una de las lineas

Así es como vemos un titulo cuando tiene aplicado un padding sin mas

texto-multilinea-error

Y asi es como queremos que se vea

titulo-con-padding-en-cada-linea

No voy a explicar toda la lógica que hay detrás de esto. Vayamos a la solución.

Este es el html. en div.titulo tenemos el background y en .highlight el background del texto, el padding que queremos que tenga y el hack mediante la propiedad box-shadow que es la que nos termina agregando los pedacitos de padding que nos falta entre lineas.

<div class="titulo">
    <span class="highlight">Títulos multi linea con padding por cada linea</span>
</div>
.titulo {
    padding-top: 32px;
    width: 700px;
    height: 200px;
    text-align: center;
    font-family: arial, helvetica, sans-serif;
    background: url('fondo.jpg') no-repeat 50% 50%;
}

.highlight {
    font-size: 50px;
    text-transform: uppercase;
    text-align: center;
    color: #fff;

    /*Esto es lo importante*/
    background: black; /* Color de fondo del texto */
    line-height: 1.6em; /* Espaciado entre lineas */
    padding: 7px 0; /* padding deseado */
    box-shadow: 14px 0 0 black, -14px 0 0 black;
}

Del CSS que puse solo hagan caso a las lineas que tienen “/*Esto es lo importante*/“. El resto es decoración.

No comenté el box-shadow porque prefiero hacerlo aquí: La magia se da en box-shadow. Solo tienes que tocar dos parámetros. El color cámbialo de black al que hayas puesto en la propiedad background, y los valores 14px y -14px ajustalos para arriba o para abajo hasta que te guste el padding lateral que hay en cada una de las lineas.

Listo!

Artículo original: css-tricks.com

CSS & maquetación

CSS: Centrar vertical y horizontalmente un elemento sin saber su tamaño

Centrar un elemento cuando se sabe el tamaño que tiene es fácil. Pero y si el elemento que queremos centrar tiene un tamaño expresado en % o no tiene un tamaño especificado, ya no es tan fácil centrarlo.

Ahora que prácticamente IE8 ya no se usa, lo podemos quitar de la ecuación y usar CSS un poco mas avanzado.
Dicho lo anterior, ahora que podemos usar la propiedad transform: translate();, ya podemos centrar vertical y horizontalmente cualquier elemento.

<div class="centrado-porcentual">
  No nos hace falta conocer el tamaño de esta caja para poder centrarla vertical y horizontalmente :)
</div>
.centrado-porcentual {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

Resultado:
centrado-vert-hoz-transform

NOTA: si el elemento que quieres centrar está dentro de otro, recuerda que el padre tiene que tener una posición relativa.

Chau!

Idea original: css-tricks.com

Druplicon

Drupal 7: Controlar completamente los template de Field collection

El muy jodido tiene mas vueltas que una oreja cuando de theming se trata.

NOTA: todos los templates que hay que crear ponlos en tu theme. Lo ideal es dentro del directorio tu_theme/templates/field_collection o algo similar.

Primero creamos el tpl field-collection-view.tpl.php que es el wrapper que hay entre el html del field y el del field collection. Pon esto dentro:

<?php print $element['#children']; ?>

Luego field-collection-item.tpl.php que es el tpl que controla el render de cada uno de los item individuales de la colección:

<?php print render($content); ?>

Por ultimo necesitamos field–field-collection.tpl.php, un tpl para el field que contiene todo lo que field collection entregue:

<ul class="coleccion de items">
  <?php foreach ($items as $delta => $item): ?>
    <li><?php print render($item); ?></li>
  <?php endforeach; ?>
</ul>

Y listo! ya tenes control a todos los niveles del markup que va a entregar un field collection.

Chau!

Druplicon

Drupal 7 : Crear un template block–bean–type-ENTITY-TYPE.tpl.php para bundles del módulo Bean

Caso de uso. Creaste un bean del tipo “banner” y quieres que el block.tpl.php tenga un marcado específico para este tipo de contenidos. O lo que es lo mismo que decir que quieres tener un block–bean–type-banner.tpl.php

La solución es poner este preprocess:

<?php
/**
 * Implements hook_preprocess_block().
 */
function TU_THEME_O_MODULO_preprocess_block(&$vars) {
  // Añadimos theme suggestions por tipo de bean.
  if ($vars['block']->module == "bean") {
    /** @var $bean Bean */
    $bean = bean_load_delta($vars['block']->delta);
    $vars['theme_hook_suggestions'][] = 'block__bean__type_' . $bean->type;
  }
}

Y ya podés copiar block.tpl.php a tu theme, renombrarlo a block–bean–type-banner.tpl.php, personalizarlo y borrar el cache.

Chau!

Druplicon

Drupal 7: Hacer bypass a page.tpl.php programáticamente

¿Y si necesitaras entregar una página sin los CSS ni JS ni el HTML (cabeceras, footer, sidebars) que viene por defecto?

Solo hay que hacer dos cosas:

1. Añadir la propiedad ‘delivery callback’ a tu menu callback

<?php
$items['factura/%node'] = array(
  'title' => 'Entrega una factura',
  'page callback' => 'generar_factura',
  'delivery callback' => 'mi_delivery_page',
  'access callback' => TRUE,
);

2. Añadir esta función.

No hace falta modificarla. Si querés cambiarle el nombre no te olvides de modificar también el nombre en el delivery callback del menú.

<?php
/**
 * Delivery callback.
 *
 * Entrega el contenido así como viene sin pasar ni
 * por page.tpl.php ni por html.tpl.php
 *
 */
function mi_delivery_page($page_callback_result) {

  if (isset($page_callback_result) && is_null(drupal_get_http_header('Content-Type'))) {
    drupal_add_http_header('Content-Type', 'text/html; charset=utf-8');
  }

  global $language;
  drupal_add_http_header('Content-Language', $language->language);
  print $page_callback_result;
  drupal_page_footer();
}

Borra cache y listo.

Chau!

Herramientas

Crear un bash alias que reciba parámetros

Por ejemplo si queremos tener un alias que nos permita importar la db de un proyecto:

En el archivo .bash_aliases o .bashrc de tu home:

# 1: creamos una función:
importar_db_demo() {
    mysql -uusuario_demo -p labasededatosdedestino < $1
}

# 2: Declaramos el alias
alias importar_db=importar_db_demo

Listo. ya podemos usarlo en la consola:

importar_db mydb.sql

Por ultimo aclarar que podes pasar la cantidad de parámetros que quieras. estos parámetros llegan a la función por medio de $1 para el primero $2 para el segundo, etc.

Druplicon

BoF de Context vs panels

El Martes 22 a las 19hs España (GMT +1) junto a estoyausente vamos a dar una pequeña charla sobre el eterno dilema de cual usar.. Context? Panels?… pues eso.

Personalmente voy a tratar de hacerlo lo mejor posible. Hablando en publico soy medio boludo a veces XD

Este BoF se va a hacer por Hangouts para los que entren, y como este tiene una capacidad limitada, todo aquel que no pueda participar activamente, puede seguirlo por Youtube (via streaming) ;)

Se va a pasar el link de Hangouts y Youtube por el Twitter de la Asociacion española de Drupal

De que vamos a hablar?
Hemos elegido una página que presenta las problematicas que todo drupalero se encuentra cuando tiene que por ejemplo:

  • Gestion de layouts.
  • Contenidos condicionales.
  • Que tipo de markup genera cada modulo y posibles mejoras (no hace falta decir cual de los módulos hace eso XD).
  • Exponer contenidos relacionados y aprovecharlos para mezclarlo todo en una sola pantalla
    (Por ejemplo: node -> author -> Profile2 -> apellido).
  • Soporte para i18n,
  • Y algunos etc, etc, etc.

Ya saben.

Chau!

Druplicon

Drupal 7: Quitar un CSS o JS programaticamente

El siguiente hook lo pones en el template.php de tu theme:

<?php
function TU_THEME_css_alter(&$css) {
  $css = array_diff_key($css, array(
    // Añade todos los CSS que quieras quitar antes que se entregue la página.
    drupal_get_path('module', 'NOMBRE_MODULO') . '/PATH/HASTA/EL/CSS/foo.css' => FALSE,
    drupal_get_path('theme', 'NOMBRE_THEME') . '/PATH/HASTA/EL/CSS/foo.css' => FALSE,
  ));
}

function TU_THEME_js_alter(&$js) {
  $js = array_diff_key($js, array(
    // Añade todos los JS que quieras quitar antes que se entregue la página.
    drupal_get_path('module', 'user') . '/user.js' => FALSE,
  ));
}

Está claro que esos hook tienen juego. Puedes mirar cual URL vas a renderizar, o averiguar cualquier otra cosa que te ayude a decidir que CSS’s/JS’s vas a querer quitar.

Chau!