Archivo de la etiqueta: Maquetación

CSS & maquetación

Chrome redimensiona mas imágenes dentro de una tabla.

Me ha pasado algo curioso y solo en chrome de momento. Tengo un texto en una celda y una imagen en la otra. El problema vino cuando usé un max-width:100% para las img en general. En ese momento toda imagen que estuviera dentro de un <td> pasó a redimensionarse:

broken

Ok, Chrome también tiene sus cositas. La solución ha sido la siguiente:

/* Quiero que todas las img usen como mucho el 100% */
img {
  max-width: 100%;
}
/* Pero si la imagen está dentro de un td anulamos el max-width para evitar ese comportamiento raro. */
table tr td > img {
  max-width: none;
}

Resultado:
fixed

Y todos felices. Chau!

CSS & maquetación

Front-end: Maquetar un buscador (input + botón) para que sea 100% fluido / responsive

La idea detrás de esto fue lograr que el buscador esté siempre al 100% del espacio que tenga disponible y no tener que preocuparme de dimensionar los input para que encajen y que el botón no caiga a dos lineas cuando se queda sin espacio.

Pueden ver como funciona si re dimensionan la ventana del navegador:

See the Pen vJBnL by Marcelo Tosco (@capynet) on CodePen.

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*/
    display: inline; /* Aseguramos que el elemento sea inline */
    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 (ojo que mi wordpress junta los dos guiones), 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!

Calcular el porcentaje de transparencia para “progid:DXImageTransform.Microsoft.gradient”

En versiones de IE <= 8 es normal tener que usar:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#d8ffffff', endColorstr='#d8ffffff');

para aplicar transparencia a un background. Pero como se puede ver, no está muy claro donde poner el porcentaje de transparencia que queremos.

En el ejemplo del principio el truco que estamos usando es aplican un degradado que va desde blanco a blanco, pero por delante de cada color tenemos “d8“, que corresponde al valor alpha de RGBA (AARRGGBB). Pero está en hexadecimal y nosotros estamos acostumbrados a usar valores decimales (tipo opacity: 0.5).

Para saber que valor tenemos que poner si queremos por ejemplo un 50% de opacidad simplemente tenemos que hacer esta cuenta:

255 * 0.5 = 127.5 (redondeando queda en 127).

A este resultado lo pasas por alguna aplicación que convierta valores decimales a hexadecimales como por ejemplo ésta lo que te va a dar “7F“. Y ya está, Nuestro filtro anterior modificado quedaría como:

Blanco al 50%:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#7Fffffff', endColorstr='#7Fffffff');

Chau!

Drupal 7 + Views: Temear exposed filters como Dios manda

Lo primero que tenes que saber es que podes tomar el control del template que imprime los filtros expuestos de un view (views-exposed-form.tpl.php) simplemente copiandolo a tu theme y poniéndole un nombre con este formato:

views-exposed-form--VIEW_NAME.tpl.php
views-exposed-form--VIEW_NAME--DISPLAY_ID.tpl.php

Ejemplos:
Tengo un view llamado listado_usuarios y dos display: una página “administracion_usuarios” y un bloque “usuarios_por_fecha”

(De mas especifico a mas genérico)

Solo para el formulario expuesto del display administracion_usuarios.

views-exposed-form--listado_usuarios--administracion_usuarios.tpl.php

Solo para el formulario expuesto del display usuarios_por_fecha.

views-exposed-form--listado_usuarios--usuarios_por_fecha.tpl.php

Para todos los display que tengan formulario expuesto en este view.

views-exposed-form--listado_usuarios.tpl.php

Cualquier view (CUALQUIERA) que tenga un display llamado administracion_usuarios.

views-exposed-form--administracion_usuarios.tpl.php

Cualquier view con cualquier display.

views-exposed-form.tpl.php

Chau!

Drupal: throbber para input gordos

La ruedita de autocomplete de drupal tiene un fallo, y es que cuando un input es un poquito “gordo” ya se ve parte de la ruiedita activa (porque es un sprite).
Aca les dejo el css y las imagenes que reemplazan al throbber de Drupal por el mismo pero separados, así deja de ser un incordio.

html.js input.form-autocomplete {
    background: url("throbber-inactive.png") no-repeat scroll 98% 50% transparent;
}
html.js input.form-autocomplete.throbbing {
    background: url("throbber-active.gif") no-repeat scroll 98% 50% transparent;
}

throbber-inactive <—- (click derecho y “guardar imagen como”)

throbber-active <—-(click derecho y “guardar imagen como”)

Aca pongo una versión con las imágenes embebidas. no hace falta que descargues las imágenes porque ya vienen incrustadas en el CSS.

html.js input.form-autocomplete {
  background: url('data:"image/png";base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAARCAMAAAA11AaTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGRkY0M0MxQ0ZDOUFFMjExOUYwNTkyQzM4NDM3MTEyQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDNzEyMkVCMjlBRkUxMUUyQTQxNTk4RTJBMDQ5RjZDQiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDNzEyMkVCMTlBRkUxMUUyQTQxNTk4RTJBMDQ5RjZDQiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjA1RjUzQzFDRkM5QUUyMTE5RjA1OTJDMzg0MzcxMTJCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkZGRjQzQzFDRkM5QUUyMTE5RjA1OTJDMzg0MzcxMTJCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+8+0pVAAAAFFQTFRFxsbGzs7O3t7e5+fnCHO9////a6/Yi7/h3u/3RpzODHu91uf3HITG7/f/oM7nNZDKyuLztdbv5+/3GHvG9/f/7+/vvb291tbW9/f3tbW1////V+AtUQAAABt0Uk5T//////////////////////////////////8AJzQLNQAAAFxJREFUeNp8j1kOgDAIRIHGI7CM9z+oharRuvBBeJBhgNZ70BureIuTg5HBMTgMxk6ALcUMyokaPFlhQ6pAL0iqXVK0nhyyc1WP+ayf96c/rv7HfR4f9//+uwkwABszFtyhYnczAAAAAElFTkSuQmCC') no-repeat scroll 98% 50% transparent !important;
}
html.js input.form-autocomplete.throbbing {
  background: url('data:"image/gif";base64,R0lGODlhDwARAMQTAMri8xyExgx7ve/3/73e7/f3/9bn9xh7xrXW797v91qi0zWQyou/4aDO52uv2Ofv90aczghzvf///////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGRkY0M0MxQ0ZDOUFFMjExOUYwNTkyQzM4NDM3MTEyQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3RkE0MTI2MTlBRkUxMUUyQUNCRDlCOEFDNDQ5MzZGQyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3RkE0MTI2MDlBRkUxMUUyQUNCRDlCOEFDNDQ5MzZGQyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyRjUzQzFDRkM5QUUyMTE5RjA1OTJDMzg0MzcxMTJCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkZGRjQzQzFDRkM5QUUyMTE5RjA1OTJDMzg0MzcxMTJCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEBQYAEwAsAAAAAA8AEQAABWjgJI5kaZ6mwThNgiZQJMvKUCZCJAQR3xek2CLBiDAAPMfIoHtIigwJQGabNCIOydOojSFEDu42KgkzRMWsBKFAdCPfCVPg1GqnkepEmLADDlgkODIQDjE/JQ+HMw56JQYNLC4olJUoIQAh+QQFBgATACwAAAIADQANAAAFR+AkTkDDTMOormIxPsEULcoiLukqFUF0vCoJIwIhiB6rhExpI5wcIoVK2mhMpJOHwzUiAGQskUAyinVZ5qttsg5HkSvkaRUCACH5BAUGABMALAAAAgANAA0AAAU/4CROz5iMY4mK6nSK0FqsoiQBwghM0SgRi55AIlKwjJEADSVg0Bwo1YI1ya0IvNZiJ+KmRtOYaGBazlZe8igEACH5BAUGABMALAAAAgANAA0AAAVI4CROBuOM6JSk4oAKE+xAYsCmtmjEqCQBk4hrcpoQGEiGDXFiiJyRaGSCRCEUWMVydwNOhqLVTQWbQIqTQGH0YDnAo91JLAoBACH5BAUGABMALAAAAgANAA0AAAVJ4CROQMNMw6iuYjE+wRQtyrikbP7kEyHuqofjIZEseieHqCZgSGqNxqQ22UUigSMBIFMRFpGJQDKKjQiClXl6nLR5U2BwclqFAAAh+QQFBgATACwAAAIADQANAAAFQOAkTs+YjGOJiup0itC0jMW6HiMwRbYuSCIFqjaJ2UQM4MohSvASStJEMGJEIIRda6ErBHio7WpgOhJROhF5FAIAIfkEBQYAEwAsAAACAA0ADQAABUXgJE7G5IzolKTigAoT7EBiwKa2WMJ35JoiAoOAQpwYIuToqExOGJIJDVEaMSJQQAuVuDIABy4vEMkFCqMHy/FDlU6rUQgAIfkEBQYAEwAsAAACAA0ADQAABUbgJE7AxEzDqK5iMT7BFC3KuKRs/uQTIe6qhwO36J0cohpyUms0mL2IACcilCKTRaQhGQm6osNMIvGtYllFMcsbKYBBEysEACH5BAUGABMALAAAAgANAA0AAAVB4CROz5iMY4mK6nSK0LSMxboeIzBFti5IIoXoVJvEUAUGzwYL8ByjGUkUgRiAE8KuFQBgdagWbDQwMYso8KQ8CgEAIfkEBQYAEwAsAAACAA0ADQAABUngJE4G44zolKTigAoT7EBiwKa2aMT3FA2MSUBBVCBQiFNkKQpOTs4FY8ogiGiIneAhkYwArdFi1UvAJpBTrTB6sByu1O5EFoUAACH5BAUGABMALAAAAgANAA0AAAVI4CROQMNMw6iuYjE+wRQtyrikY8yKjxxBhhGB15hAApGIA7eYEE6OwmniENWKE4VEkoiqCADZbiKQ5L4sXbY5YY+zvVVvqgoBACH5BAUGABMALAAAAgANAA0AAAVB4CROz5iMY4mK6nSiy1isUSweI8AuUSPqAolIISFMBCPISiJRrFAO1mQgspWQK2OktdD9VtyJUkQVvVazlXeKCgEAOw==') no-repeat scroll 98% 50% transparent !important;
}

Chau!

Druplicon

Drupal 7: Integrar Inline entity form perfectamente en el formulario en el que está anidado.

Cuando Inline entity form renderiza la entidad dentro de otro formulario tiende a meterle fieldsets y títulos extra que no son estrictamente parte del formulario de la entidad referida. Como resultado, el formulario anidado queda como tal, como si estuviera anidado, y eso no queda bonito. Estaria mejor que el formulario visualmente se integrase mejor al formulario del nodo al que está referido.

Para lograr esto agarra tu módulo o theme (template.php) y pon esto:

<?php
function TUMODULO_o_THEME_field_widget_inline_entity_form_single_form_alter(&$entity_form, &$form_state) {
  $entity_form['#type'] = 'container';
  $entity_form['form']['product_details']['#type'] = 'container';
  unset(
  $entity_form['#title'],
  $entity_form['#tree'],
  $entity_form['#description'],
  $entity_form['#prefix'],
  $entity_form['#suffix']
  );
}
?>

Básicamente se deshace de los fieldset que aíslan al formulario de la entidad referida del formulario que lo contiene.

El antes y el después:
Entity inline clean
Chau!