Explorando la Categoría: "CSS"
Ya sabemos para que sirve cada fichero de un theme de wordpress , ahora toca empezar a escribir nuestro theme.
Voy a adaptar una plantilla básica ,de las que vienen con Dreamweaver CS3 , para usarla como theme para WordPress, de esta forma, cuando tenga que realizar algún theme original, ya tendré mi plantilla adaptada y lista para modificar.
La plantilla en cuestión es esta:
Buscando hacks de css me he encontrado un artículo donde explican un curioso comportamiento de lo navegadores de Microsoft.
El hack viene bien como atajo para escribir menos , ya que no necesitaremos escribir el condicional entero. Escribiendo # delante de la propiedad css , solo se aplicará a a Internet Explorer , y si escribimos un _ antes de a propiedad, solo se aplicará a Internet Explorer 6.
Curioso.
Ejemplo:
.miClase{ width: 15px; /* Para todos los Browsers */ #width: 20px; /*Para Internet Explorer */ _width: 25px; /* Para Internet Explorer 6 */ }
Sin duda una buena forma de escribir menos código css en nuestros diseños.
Muchas veces he necesitado añadir un script Javascript a una vista en concreto mientras desarrollaba un componente para, por ejemplo,mostrar un mapa de Google maps. También he necesitado añadir un estilo específico para dar estilo a mi componente, pero solo a esa vista sin que se cargue el script de google maps en todo el sitio, ya que esto lo ralentizaría.
Hoy en el trabajo me ha tocado hacer un template para Joomla! desde cero, y como es imposible hacer una plantilla para Joomla! sin saber los Css por defecto, he decidido hacer una chuleta para agilizar futuros trabajos.
No se si la chuleta esta completa, pero con esto he tenido suficiente para llevar a cabo la faena.
Si ves algo que se pueda mejorar, por favor deja un comentario y la amplio.
Muchas veces he visto un efecto en páginas web en las que ponian sus enlaces con un subrayado hecho a lápiz como este.
Pues esta tarde lo he vuelto a ver y me ha entrado curiosidad por saber como lo hacen, así que he inspeccionado el código con firebug y la verdad es que no es muy complicado, simplemente poniendo este código css en el template de mi theme de wordpress obtengo este efecto:
background:transparent url(images/link.png) repeat-x scroll 100% bottom; padding-bottom:3px; text-decoration:none; }
Con este código le estoy diciendo que le ponga a los enlaces una imagen de fondo link.png abajo y que la repita horizontalmente, le doy un poco de padding abajo , para que la imagen no se quede debajo del texto, y por ultimo le quitamos el subrayado que traen los enlaces por defecto con la regla “text-decoration:none”.
A partir de ahora mis los enlaces aparecerán con este efecto de subrayado tan original.
Por cierto la imagen de fondo es esta :
Me llamo David Noguera, tengo 23 años y soy Desarrollador/Administrador web.
Puedes encontrar algo más de información en la página