Entradas

Mostrando las entradas etiquetadas como css

MediaWiki y Font Awesome

Este tutorial se aplica a Media Wiki 1.25 y cualquier versión de Font Awesome . Font Awesome para los que aún no sepan es un set de iconos vectoriales escalables que instantáneamente pueden personalizar el tamaño, color,  sombra, y todo lo que se puede hacer con el poder de CSS, por ello incluirlo en una instalación de MediaWiki nos puede ahorrar muchas imágenes y da un toque de diseño especial. Font Awesome para Media Wiki está incluido como parte de la extensión MegaMenú , pero puede ser instalada de forma separada que es lo que he hecho yo. El primer paso es descargar el código fuente de la extensión desde la página oficial o desde el enlace directo . Luego descomprimimos el archivo ZIP. Si queremos la ultima versión de los íconos vamos a la página oficial los descargamos y descomprimimos. Sustituimos en el directorio font-awesome de la extensión las carpetas css, fonts, less y scss con la que hemos descargado con la última versión de los íconos. Copiamos toda l...

Reduciendo el tamaño de mPDF

Imagen
mPDF es una clase PHP que genera archivos PDF desde HTML con codificación UTF-8. Se basa en FPDF y HTML2FPDF, con una serie de mejoras. Según el propio autor la librería, que ya va por su versión 6.0 y es sobre la que hablaré en este post, se creó para producir archivos PDF de diferentes idiomas al vuelo. Es más lento que los scripts originales, por ejemplo HTML2FPDF, y produce archivos más grandes cuando se usa Unicode, pero tiene soporte de estilos CSS y muchas mejoras . Pero bueno, si has llegado hasta aquí buscando como reducir el tamaño de esta librería supongo que sepas lo anterior así que vamos al grano. Este post va dedicado a todos aquellos que generan PDF pero que no requieren funcionalidades extras, en mi caso solo necesito que un HTML en español e inglés, con imágenes y estilos básicos sea convertido en un PDF de una sola página, por ejemplo el siguiente código: $mpdf = new mPDF('en-GB-x','A4','','',5,5,5,5,0,0); $mpdf->mirrorMargins =...

Código fuente en Blogger

Un blog como este, de programación, requiere que en muchos post sea necesario introducir código para mostrar ejemplos y en Blogger, creedme, no ha sido tarea fácil. Hay que sumar a mi dejadez los pocos plugins que hay para resaltar el código fuente. He trabajo con 3, el último es el que estoy utilizando actualmente y es el que más me convence. SyntaxHighlighter para Windows Live Writer Fue el primero que utilicé, al principio me iba bien pero tiene la desventaja que se ejecuta del lado del redactor y no en el servidor, o sea, el código formateado sale una vez redactas el post con Windows Live (herramienta que utilizo porque la edición online de Blogger me parece desastrosa). Tiene el inconveniente de no ser para usuarios básicos, hay que instalar librerías dll, configurarlas en cada ordenador que tengamos y que utilicemos para escribir en el blog. Otro de los errores que me suelo encontrar al utilizar SyntaxHighlighter para Windows Live Writer es la diferencia de estilos entre lo ...

Alternativa para íconos de jQuery UI

Imagen
Buscando por la web, recientemente encontré un paquete de íconos genial para cualquier desarrollo web y que con una modificación en el CSS es plenamente compatible con los escasos íconos de jQuery UI. Una de las mayores ventajas que le veo a este pack de íconos llamado Font Awesome es que como su mismo nombre lo índica, no son imágenes sino un tipo de letra, con lo cual redimensionarlos, cambiarles de color y alinearlos con un texto es excesivamente sencillo y no necesitamos imágenes adicionales. Seguro que alguna utilidad le encontráis a Font Awesome, la alternativa y / o complemento a los íconos por defecto de jQuery UI .

Elementos <span> y márgenes superiores

Cualquiera que haya probado un poco de CSS se ha dado cuenta que las propiedades margin-top y margin-bottom no surten efectos sobre elementos del tipo span . ¿Por qué los elementos span no admiten el margin-top? La razón es porque los tags span son elementos inline lo que significa que por defecto ocupan solo el espacio necesario para mostar los contenidos y la caja que lo contiene no sea un bloque sino como una línea. ¿Cómo solucionar que los tags span admitan márgenes superiores e inferiores? La forma más sencilla es utilizar la misma propiedad CSS que lo impide: display, y modificarla para que sea del tipo inline-block, lo que significa que se van a crear elementos cuyos espacios o cajas: (…) son de bloque y en línea de forma simultánea. Una caja de tipo inline-block se comporta como si fuera de bloque, pero respecto a los elementos que la rodean es una caja en línea. En el siguiente enlaces podemos ver todas las propiedades que admite el atributo display en CSS.