IcoMoon es genial, siempre que veo un iconfont o un pack de iconos armado con sprite tengo que sopesar si los KB que trae con sigo me va a compensar, al fin y al cabo suelo usar 5 o 10 iconos de los cientos que estos pack traen. Y acá es donde IcoMoon me enamoró.
Es una tontería pero puede que te ahorre un dolor de cabeza. Cuando buscas una localización en google maps y te copias el código para embeberlo en un site Al insertar ese código vas a ver que la burbuja informativa está cortada: Y eso molesta!. La solución es acceder a la configuración del mapa que se va a embeber y centrar el mapa a mano:
Tengo que decirlo: es alucinante los bug que tiene IE (da igual la versión, nunca terminan de solucionarlos). El ultimo con el que me di es que si usas una imagen transparente para hacer un fondo transparente, se va a ver genial en todos los navegadores menos en Internet Explorer (7 y 8, el 9 no se) Así es
Sé que hay soluciones hechas para este problema en particular, pero pesa 33k y solo necesitamos unas líneas como van a ver para lograr lo mismo… Sabido es que a ie se la sudan los estándares y cuando los incorporan por lo general lo hacen taaarde. La propiedad CSS “box-sizing” no es la excepción. Ya
Ya que tuve que buscarlos se los ofrezco (pinchen en las imágenes para descargar):
Cuando lo veas vas a darte cuenta que muchas veces te ahogas en un vaso de agua por no tener en claro los pasos que tenes que seguir. Personalmente suelo ser muy desorganizado, bueno mi cabeza en realidad, y este tipo de ayudas son inestimables. PD: si sos un loco de la usabilidad proba a
Esta es una practica que no he visto que sea muy extendida pero que es de las mas eficientes para un maquetador por la buena organización que presenta. La idea es simple. creas un selector para el sprite, un selector por imagen del sprite y por ultimo vas asignándole el par class=”un-elemento-x sprite icono-del-sprite” Pongo
Este es un tip rápido pero útil. Escenario: Tenes un div con el id “elDiv” con el siguiente CSS:
|
1 2 3 4 5 6 |
#elDiv { border: 1px solid #336699; float: right; padding: 20px; width: 500px; } |
Y en Firefox/Chrome/Safari/Opera al hacer $(“#elDiv”).height(); te entrega 400px por decir algo (el tamaño depende de lo que tenga dentro). Pero curiosamente en Internet explorer te da un tamaño raro… de menos, unos 358px en
Me rompí un poco la cabeza con este asunto: Hago unas modificaciones que se ven mas que bien en todos los navegadores menos en IE como siempre, y por ello tengo un ie.css puntual para hacer todas las cosas raras que se suelen hacer con CSS para que IE trague. El problema me lo di
Supongamos que tenemos un formulario que creamos para que se vea en la URL http://www.ejemplo.com/themed_form El formulario definido en el modulo tendría una pinta como la siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
< ?php function formulario(){ $form['nombre'] = array( '#title' => t('Nombre'), '#type' => 'textfield', ); $form['apellido'] = array( '#title' => t('Apellido'), '#type' => 'textfield', ); $form['mail'] = array( '#title' => t('e-mail'), '#type' => 'textfield', ); $form['telefono'] = array( '#title' => t('Teléfono'), '#type' => 'textfield', ); $form['submit'] = array( '#type' => 'submit', '#value' => t('Enviar'), ); return $form; } |
Y el hook_menu tendría una pinta como esta:
|
1 2 3 4 5 6 7 |
< ?php function theme_form_sample_menu(){ $items['themed_form'] = array( 'title' => 'Muestra de themado de un formulario', 'page callback' => 'render_formulario', 'access arguments' => array(true), 'type' => MENU_CALLBACK, ); return $items; } |
Y la función para aplicar sobre la url seria:
|
1 2 3 4 5 6 7 8 9 |
< ?php function render_formulario(){ //podemos agregar nuestros extras. drupal_add_js(drupal_get_path('module', 'theme_form_sample') .'/js/ejemplo.js'); drupal_add_css(drupal_get_path('module', 'theme_form_sample') .'/css/ejemplo.css'); //ya podemos generar el formulario. return drupal_get_form("formulario"); } |
El formulario se va a dibujar correctamente y