Otro Blog Geek

Ya casi he terminado de actualizar la plantilla de OBG. Creo que tiene un aspecto más claro así, sin embargo se aceptan sugerencias (como siempre). Una de las cosas que he hecho es eliminar el soporte para internacionalización de Sandbox en un intento por hacer la plantilla algo más rápida. Me he basado, principalmente, en los consejos de este post de Andrés Nieto.

Todavía tengo algunas modificaciones pendientes y algunos añadidos que me gustaría añadir. En cuanto estén listos la publicaré por si le sirve a alguien. De todas maneras si alguien quiere el código solo tiene que pedirlo, pero aviso de que es una auténtica chapuza, no está terminado en absoluto y tiene fallos y remiendos por todos lados.

Desde hace un rato estoy actualizando Otro Blog Geek así que es posible que se comporte de forma extraña. He tenido que actualizar a Wodrpress 2.3.2 debido a un bug que permitía ver los borradores :S. Andres Nieto amplía los datos acerca de esta actualización.

Además vengo preparando una pequeña actualización de la plantilla basada en una versión más actual de sandbox. En cuanto esté más o menos lista colgaré el código fuente… no lo he hecho aún por que me da un poco de vergüenza que se vea por dentro antes de que lo adecente y por otro lado la plantilla no está terminada, por ahora solo es una modificación del CSS de sandbox con 4 o 5 cositas más.

Si al entrar encontráis algún error que persiste avisadme por que probablemente me haya olvidado de arreglar algo en la plantilla.

¿Por qué otra librería que hace lo mismo?

Hace poco tuve que terminar de darle forma a un proyecto con Joomla! una de las cosas que más trabajo cuesta es darle estilo a un formulario usando CSS. Probé un par de soluciones como FancyForm y CRIR pero ninguna se adaptaba al código generado por Joomla, así que no me quedó más remedio que escribir mi propio script que hiciera lo propio.

Como funciona.

mooSmartForms está inspirado en otras librerías como CRIR y FancyForm, por lo tanto usa el mismo mecanismo. Mediante Javascript oculta los controles del formulario y añade un estilo para el control desactivado y otro para el control activado a la etiqueta asociada al control.

La librería permite aplicar una clase CSS a los elementos. Hace uso de mootools, de ahí el “moo” del nombre. Para que nuestro código sea “estilizable” tiene que tener las siguientes características.

• Cada checkbox o radio input necesita tener un elemento label asociado a su id.

Listo no hay más requisitos. A continuación un ejemplo de como sería ese código “estilizable”.

Para que el script haga su trabajo hay que insertarlo en la página y además necesitamos mootools.

Un pequeño ejemplo del aspecto que podemos conseguir con la librería. Ejemplo de mooSmartForms

Aquí tenéis mooSmartForms para descargarlo y usarlo como queráis. Tiene una licencia MIT, así que podéis hacerle todas las “perrerías” que os apetezca. Si queréis personalizar el estilo solo tenéis que editar el fichero mooSmartForms.css

Soporte.

He probado mooSmartForms con los siguiente navegadores:

• Internet Explorer 6 y 7
• Firefox 2
• Konqueror
• Safari 3 ( gracias a Álvaro por el testeo )
• Opera

Si conseguís que funcione en otro navegador agradecería que me lo hicierais saber :D. Aunque también se agradece un aviso con cualquier error que encontréis o con problemas que se me hayan pasado.

Para futuras versiones.

• Estilos para el resto de elementos de los formularios.
• Posibilidad para discriminar los elementos que queremos “estilizar”.
• Capacidad para añadir efectos a las transicciones entre los estados de los elementos.
• Posibilidad de elegir el nombre que queremos darle a las clases CSS de los elementos.

Para terminar.

Si encontráis algún error o algún problema podéis dejar un comentario en el post. Sin necesitáis añadir código al post, por favor, utilizad esta web.

Créditos.

Las imágenes que se usan para el estilo de ejemplo pertenecen al tema de iconos silk icons que tiene licencia Creative Commons.