¿Alguna vez se preguntó cómo aplicar un súper estilo a la fecha de publicación de su blog? Le mostraré cómo hacer esto usando sprites CSS en aproximadamente 18 minutos.
Nota editorial: esta publicación está dirigida a diseñadores de temas. Se recomiendan conocimientos previos de CSS y WordPress.
Que necesitarás:
- Un programa de gráficos (yo uso Adobe Photoshop CS4)
- Un editor de texto simple
Lo que obtendrá en este tutorial:
- Las fechas en las publicaciones de su blog se diseñarán con estilo usando CSS Sprites
Vamos a empezar…
Paso 1
Inicie su programa de gráficos. Puedes descargar una plantilla PSD o PNG para ayudarte con el diseño de todas las fechas en nuestro Sprite.
Paso 2
Básicamente, desea crear una cuadrícula usando meses, días y años. Como puede ver, mi cuadrícula tiene los meses en una columna, los días en dos columnas y finalmente los años verticalmente en una columna. Después de obtener las fechas en la «cuadrícula», puede guardar el archivo. Consejo: asegúrese de que su texto sea equidistante de arriba a abajo y de izquierda a derecha. Esto simplifica las matemáticas cuando cada fecha tiene el mismo espacio en blanco.
Paso 3
Pasemos a la codificación … No se preocupe, es muy fácil, especialmente si está usando mi PNG o el archivo PSD (incluye pautas para mantener su «cuadrícula» ordenada, además puede cortar y pegar el código CSS de este paso directamente en su hoja de estilo de temas sin matemáticas).
El CSS es el siguiente:
/ * Fecha Sprite * /
.fecha de publicación {
posición: relativa;
ancho: 66px;
altura: 60px;
flotador izquierdo;
}
.mes día año {
posición: absoluta;
sangría del texto: -1000em;
imagen de fondo: url (images / date_img.png);
repetición de fondo: sin repetición;
}
.month {top: 10px; izquierda: 0; ancho: 33px; altura: 30 px;}
.day {top: 30px; izquierda: 0; ancho: 33px; altura: 30 px;}
. año {parte inferior: 0; derecha: 13px; ancho: 20px; altura: 60px;}
.m-01 {posición de fondo: 0 0px;}
.m-02 {posición de fondo: 0 -30px;}
.m-03 {posición de fondo: 0 -62px;}
.m-04 {posición de fondo: 0 -94px;}
.m-05 {posición de fondo: 0 -125px;}
.m-06 {posición de fondo: 0 -155px;}
.m-07 {posición de fondo: 0 -185px;}
.m-08 {posición de fondo: 0 -217px;}
.m-09 {posición de fondo: 0 -248px;}
.m-10 {posición de fondo: 0 -279px;}
.m-11 {posición de fondo: 0 -310px;}
.m-12 {posición de fondo: 0 -341px;}
.d-01 {posición de fondo: -51px 0;}
.d-02 {posición de fondo: -51px -27px;}
.d-03 {posición de fondo: -51px -57px;}
.d-04 {posición de fondo: -51px -91px;}
.d-05 {posición de fondo: -51px -122px;}
.d-06 {posición de fondo: -51px -151px;}
.d-07 {posición de fondo: -51px -185px;}
.d-08 {posición de fondo: -51px -214px;}
.d-09 {posición de fondo: -51px -249px;}
.d-10 {posición de fondo: -51px -275px;}
.d-11 {posición de fondo: -51px -309px;}
.d-12 {posición de fondo: -51px -338px;}
.d-13 {posición de fondo: -51px -373px;}
.d-14 {posición de fondo: -51px -404px;}
.d-15 {posición de fondo: -51px -436px;}
.d-16 {posición de fondo: -51px -462px;}
.d-17 {posición de fondo: -100px -0px;}
.d-18 {posición de fondo: -100px -27px;}
.d-19 {posición de fondo: -100px -57px;}
.d-20 {posición de fondo: -100px -91px;}
.d-21 {posición de fondo: -100px -122px;}
.d-22 {posición de fondo: -100px -151px;}
.d-23 {posición de fondo: -100px -185px;}
.d-24 {posición de fondo: -100px -214px;}
.d-25 {posición de fondo: -100px -249px;}
.d-26 {posición de fondo: -100px -275px;}
.d-27 {posición de fondo: -100px -309px;}
.d-28 {posición de fondo: -100px -338px;}
.d-29 {posición de fondo: -100px -373px;}
.d-30 {posición de fondo: -100px -404px;}
.d-31 {posición de fondo: -100px -436;}
.y-2009 {posición de fondo: -150px 0;}
.y-2010 {posición de fondo: -150px -60px;}
.y-2011 {posición de fondo: -150px -120px;}
.y-2012 {posición de fondo: -150px -180;}
.y-2013 {posición de fondo: -150px -240px;}
.y-2014 {posición de fondo: -150px -300px;}
Explicación:
.fecha de publicación – Establecer el ancho y alto de toda la fecha. En este caso, pondremos nuestra fecha en un recuadro de 66px por 60px.
.mes día año – Establezca el ancho y alto de los elementos individuales que componen nuestra fecha completa de Sprite. Nuestros meses y días tienen 33 px de ancho y 30 px de alto. Los años tienen 33 píxeles de ancho y 60 píxeles de alto. Cuando juntas estos elementos, forman una caja de 66 px de ancho por 60 px de alto. También adjunte la obra de arte que hicimos en el paso n. ° 1 para que podamos colocarla para cada elemento del Sprite.
desde .m-01 hasta .m-12 – ¡Tu adivinaste! Estos son nuestros meses. Esta parte del CSS posiciona nuestro gráfico para mostrar los meses. Como puede ver, he configurado la imagen para que se mueva en un eje XY en función de dónde aparece en la imagen. La forma más fácil de averiguar dónde está la esquina superior izquierda (0,0) de cada mes, día o año en la imagen más grande es abrir Photoshop y seleccionar la herramienta Selección. Seleccione de arriba a la izquierda a abajo y de derecha a justo encima de la esquina superior izquierda de su mes, día o año y observe dónde está el puntero usando las estadísticas del panel de información.
de .d-01 a .d-31 – Se usa exactamente para lo mismo que .m-01 – .m-12 excepto para usarlos durante días en lugar de meses.
.y-2009 hasta .y-2014 – Como antes, solo los hemos estado usando durante años.
Paso 4
Abre el ciclo en WordPress. El ciclo en WordPress se compone de las páginas que muestran las publicaciones de su blog. Esta suele ser la página index.php. Las fechas también aparecen en otras páginas, pero este tutorial solo reemplaza las fechas en el ciclo principal. Si ha llegado a esta sección del tutorial, es lo suficientemente inteligente como para buscar y reemplazar las otras instancias de fecha en su tema en otros archivos como single.php, page.php, archives.php, etc.
Busque algo en esta línea en su ciclo:
<? php the_time (‘F jS, Y’)?>
Reemplazar con estas líneas:
Paso 5
Sube tu imagen, CSS y tu bucle de tema (index.php). Presiona Actualizar en tu blog (asegúrate de estar en la página donde se muestran las publicaciones) y ¡listo! Simplemente estilizaste tus fechas usando sprites CSS.
Todd Santoro es el diseñador principal y sénior de su empresa Dibujos de ToddSantoro.com. Todd ha estado en la web durante 11 años y se destaca en la interfaz de usuario y los gráficos. Le gusta prestar atención a los detalles y desarrollar en el marco de WordPress.
¿Te ha resultado útil??
0 / 0