Utilisez des sprites CSS pour embellir vos dates de publication WordPress

Vous êtes-vous déjà demandé comment styliser la date de publication de votre blog? Je vais vous montrer comment faire cela en utilisant des sprites CSS dans environ 18 minutes.

Note de la rédaction: Ce message est destiné aux concepteurs de thèmes. Une connaissance préalable de CSS et WordPress est recommandée.

Ce dont vous aurez besoin:

• Un programme graphique (j'utilise Adobe Photoshop CS4)
• Un simple éditeur de texte

Ce que vous allez accomplir dans ce tutoriel:

• Les dates sur les articles de votre blog seront super stylées avec des sprites CSS

Commençons…

Étape 1

Lancez votre programme graphique. Vous pouvez télécharger un modèle PSD ou PNG pour faciliter la mise en page de toutes les dates dans notre Sprite..

Étape 2

En gros, vous voulez créer une grille utilisant des mois, des jours et des années. Comme vous pouvez le constater, ma grille contient les mois dans une colonne, puis les jours dans deux colonnes et enfin les années verticalement dans une colonne. Une fois que vous avez vos dates sur la «grille», vous pouvez enregistrer le fichier. Astuce: assurez-vous que votre texte est à égale distance du haut vers le bas et de gauche à droite. Cela facilite le calcul lorsque chaque date a le même espace blanc.

Étape 3

En ce qui concerne le codage… Ne vous inquiétez pas, c'est vraiment facile, surtout si vous utilisez mon fichier PNG ou avez utilisé le fichier PSD (il contient des instructions pour que votre “grille” soit belle et ordonnée. Vous pouvez ensuite couper et coller le code CSS cette étape directement dans la feuille de style de vos thèmes sans aucun calcul.)

Le CSS est comme suit:

/ * Date Sprite * /
.postdate
position: relative;
largeur: 66px;
hauteur: 60px;
float: gauche;

.année mois jour
position: absolue;
retrait du texte: -1000em;
background-image: url (images / date_img.png);
répétition de fond: non répétée;

.mois top: 10px; gauche: 0; largeur: 33px; hauteur: 30px;
.jour top: 30px; gauche: 0; largeur: 33px; hauteur: 30px;
.année en bas: 0; à droite: 13px; largeur: 20px; hauteur: 60px;

.m-01 background-position: 0 0px;
.m-02 background-position: 0 -30px;
.m-03 background-position: 0 -62px;
.m-04 background-position: 0 -94px;
.m-05 background-position: 0 -125px;
.m-06 background-position: 0 -155px;
.m-07 background-position: 0 -185px;
.m-08 background-position: 0 -217px;
.m-09 background-position: 0 -248px;
.m-10 background-position: 0 -279px;
.m-11 background-position: 0 -310px;
.m-12 background-position: 0 -341px;

.d-01 background-position: -51px 0;
.d-02 background-position: -51px -27px;
.d-03 background-position: -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 background-position: -51px -214px;
.d-09 background-position: -51px -249px;
.d-10 background-position: -51px -275px;
.d-11 background-position: -51px -309px;
.d-12 background-position: -51px -338px;
.d-13 background-position: -51px -373px;
.d-14 background-position: -51px -404px;
.d-15 background-position: -51px -436px;
.d-16 background-position: -51px -462px;
.d-17 background-position: -100px -0px;
.d-18 background-position: -100px -27px;
.d-19 background-position: -100px -57px;
.d-20 position d'arrière-plan: -100px -91px;
.d-21 background-position: -100px -122px;
.d-22 position d'arrière-plan: -100px -151px;
.d-23 position de fond: -100px -185px;
.d-24 background-position: -100px -214px;
.d-25 background-position: -100px -249px;
.d-26 background-position: -100px -275px;
.d-27 background-position: -100px -309px;
.d-28 background-position: -100px -338px;
.d-29 background-position: -100px -373px;
.d-30 background-position: -100px -404px;
.d-31 background-position: -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;

Explication:

.postdater - Définit la largeur et la hauteur de la date entière. Dans ce cas, nous allons adapter notre date à une boîte de 66px par 60px.

.année mois jour - Définit la largeur et la hauteur des éléments individuels composant l’ensemble de notre date Sprite. Nos mois et nos jours mesurent 33 pixels de large par 30 pixels de haut. Les années sont 33px large par 60px haut. Lorsque vous mettez ces éléments ensemble, ils forment une boîte de 66 pixels de large par 60 pixels de haut. Il attache également le graphique que nous avons créé à l’étape 1 afin que nous puissions le positionner pour chaque élément individuel du Sprite..

.m-01 à .m-12 - Tu l'as deviné! Ce sont nos mois. Cette partie du CSS positionne notre graphique pour afficher les mois. Comme vous pouvez le voir, je règle l'image pour qu'elle se déplace sur un axe Y X en fonction de l'endroit où elle apparaît sur l'image. Le moyen le plus simple de déterminer l'emplacement de la plus grande image dans le coin supérieur gauche (0,0) de chaque mois, jour ou année est d'ouvrir Photoshop et de sélectionner l'outil Rectangle de sélection. Sélectionnez en haut à gauche, en bas et à droite juste au-dessus du coin supérieur gauche de votre mois, jour ou année et notez où votre pointeur utilise les statistiques du panneau d'informations..

.d-01 à .d-31 - Est utilisé pour exactement la même chose que .m-01 - .m-12 sauf qu'ils sont utilisés pour les jours plutôt que les mois.

.y-2009 à .y-2014 - Comme ci-dessus seulement nous les utilisons pour les années.

Étape 4

Ouvrez la boucle dans WordPress. La boucle dans WordPress est la ou les pages qui affichent votre blog. Ceci est généralement la page index.php. Les dates apparaissent également sur d'autres pages, mais ce tutoriel ne remplace que les dates de la boucle principale. Si vous arrivez à cette section du didacticiel, vous êtes suffisamment intelligent pour rechercher et remplacer les autres instances de dates de votre thème dans d'autres fichiers tels que single.php, page.php, archives.php, etc..

Rechercher quelque chose le long de cette ligne dans votre boucle:

Remplacez par ces lignes:

Étape 5

Téléchargez votre image, CSS et la boucle de vos thèmes (index.php). Cliquez sur Actualiser sur votre blog (assurez-vous d'être sur la page sur laquelle les messages sont affichés) et Voila! Vous venez de super styler vos dates en utilisant des sprites CSS.

Todd Santoro est le principal et concepteur principal de son entreprise. Dessins ToddSantoro.com. Todd travaille sur le Web depuis 11 ans et excelle en interface utilisateur et en design graphique. Il aime prêter attention aux détails et développer le cadre WordPress. Vous pouvez le suivre sur Gazouillement.