Use CSS Sprites para embellecer sus fechas de publicación de WordPress

¿Alguna vez te has preguntado cómo personalizar la fecha de publicación de tu blog? Les 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 recomienda el conocimiento previo de CSS y WordPress..

Que necesitarás:

• Un programa de gráficos (yo uso Adobe Photoshop CS4)
• Un simple editor de texto.

Lo que vas a lograr en este tutorial:

• Las fechas en las publicaciones de tu blog se superpondrán con CSS Sprites

Empecemos…

Paso 1

Enciende tu programa de gráficos. Puede descargar una plantilla PSD o PNG para ayudar con el diseño de todas las fechas en nuestro Sprite.

Paso 2

Básicamente, desea crear una cuadrícula con meses, días y años. Como puede ver, mi cuadrícula tiene los meses en una columna, luego los días en dos columnas y finalmente los años verticalmente en una columna. Una vez que obtenga sus fechas en la "cuadrícula" puede guardar el archivo. Sugerencia: asegúrese de que su texto esté espaciado de la misma manera de arriba a abajo y de izquierda a derecha. Esto facilita las matemáticas cuando cada fecha tiene el mismo espacio en blanco.

Paso 3

En la codificación ... No se preocupe, es muy fácil, especialmente si está usando mi PNG o si ha usado el archivo PSD (incluye pautas para mantener su "cuadrícula" limpia y ordenada, y luego puede cortar y pegar el código CSS este paso directamente en la hoja de estilo de tus temas sin ninguna matemática.)

El CSS es el siguiente:

/ * Fecha Sprite * /
.fecha posterior
posición: relativa;
ancho: 66px;
altura: 60px;
flotador izquierdo;

.mes día año
posición: absoluta;
texto-sangría: -1000em;
imagen de fondo: url (images / date_img.png);
repetición de fondo: no repetición;

.mes arriba: 10px; izquierda: 0; ancho: 33px; altura: 30px;
.dia arriba: 30px; izquierda: 0; ancho: 33px; altura: 30px;
.año inferior: 0; derecha: 13px; ancho: 20px; altura: 60px;

.m-01 background-position: 0 0px;
.m-02 posición de fondo: 0 -30px;
.m-03 posición de fondo: 0 -62px;
.m-04 background-position: 0 -94px;
.m-05 posición de fondo: 0 -125px;
.m-06 background-position: 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 background-position: -51px -91px;
.d-05 background-position: -51px -122px;
.d-06 background-position: -51px -151px;
.d-07 background-position: -51px -185px;
.d-08 posición de fondo: -51px -214px;
.d-09 background-position: -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 background-position: -150px 0;
.y-2010 background-position: -150px -60px;
.y-2011 background-position: -150px -120px;
.y-2012 background-position: -150px -180;
.y-2013 background-position: -150px -240px;
.y-2014 background-position: -150px -300px;

Explicación:

.posfechar - Establece el ancho y alto de la fecha completa. En este caso vamos a hacer que nuestra fecha encaje en una caja de 66px por 60px.

.mes día año - Establece el ancho y el alto de los elementos individuales que conforman nuestra fecha completa Sprite. Nuestros meses y días son 33px de ancho por 30px de alto. Los años son 33px de ancho por 60px de alto. Cuando pones estos elementos juntos, hacen una caja de 66px de ancho por 60px de alto. También adjunta el gráfico que hicimos en el paso # 1 para que podamos ubicarlo para cada elemento individual en el Sprite..

.m-01 a través de .m-12 - ¡Lo adivinaste! Estos son nuestros meses. Esta parte del CSS posiciona nuestro gráfico para mostrar los meses. Como puede ver, configuro 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 Marquee. Selecciona desde la parte superior izquierda hacia abajo y hacia la derecha hasta justo arriba de la esquina superior izquierda de tu mes, día o año y observa dónde está el puntero usando las estadísticas del panel de información.

.d-01 a .d-31 - Se usa exactamente para lo mismo que .m-01 - .m-12 excepto que se usa para los días en lugar de los meses.

.y-2009 hasta .y-2014 - Igual que el anterior solo los usamos por años..

Etapa 4

Abre el bucle en WordPress. El bucle en WordPress es la (s) página (s) que muestra (s) las publicaciones de su blog. Esta suele ser la página index.php. Las fechas aparecen en otras páginas también, pero este tutorial solo reemplaza las fechas en el ciclo principal. Si llegaste a esta sección del tutorial, eres lo suficientemente inteligente como para buscar y reemplazar las otras instancias de fechas en tu tema en otros archivos como single.php, page.php, archives.php, etc..

Busca algo en esta línea en tu bucle:

Reemplazar con estas líneas:

Paso # 5

Sube tu imagen, CSS y el bucle de tus temas (index.php). Presiona actualizar en tu blog (asegúrate de estar en la página donde se muestran las publicaciones) y ¡voilá! Acabas de estilizar tus fechas usando sprites CSS.

Todd Santoro es el diseñador principal y principal de su empresa. ToddSantoro.com Diseños. Todd lleva 11 años trabajando en la web y se destaca en UI y diseño gráfico. Le encanta prestar atención a los detalles y desarrollar en el marco de WordPress. Puedes seguirlo en Gorjeo.