Ever marvel how you can tremendous type your weblog’s put up date? I’m going to indicate you ways to do that utilizing CSS sprites in about 18 minutes.
Editorial Be aware: This put up is geared towards theme designers. Prior information of CSS and WordPress is beneficial.
What you have to:
- A graphics program (I take advantage of Adobe Photoshop CS4)
- A easy textual content editor
What you’ll accomplish on this tutorial:
- The dates in your weblog’s posts can be tremendous styled utilizing CSS Sprites
Let’s get began…
Step #1
Fireplace up your graphics program. You may obtain a PSD or PNG template to assist with the format of the entire dates in our Sprite.
Step #2
Principally you wish to create a grid utilizing months, days, and years. As you’ll be able to see, my grid has the months in a single column then the times in two columns and eventually the years vertically in a column. When you get your dates on the “grid” it can save you the file. Trace: Ensure your textual content is equally spaced from prime to backside and from left to proper. This makes the maths simpler when every date has the identical white area.
Step #3
On to the coding… Don’t fear it’s very easy, particularly if you’re utilizing my PNG or have used the PSD file (It contains pointers to maintain your “grid” good and neat plus you’ll be able to then minimize and paste the CSS code on this step straight into your themes’ stylesheet with none math.)
The CSS is as follows:
/*Date Sprite */ .postdate { place: relative; width: 66px; top: 60px; float: left; } .month, .day, .12 months { place: absolute; text-indent: -1000em; background-image: url(photos/date_img.png); background-repeat: no-repeat; } .month { prime: 10px; left: 0; width: 33px; top: 30px;} .day { prime: 30px; left: 0; width: 33px; top: 30px;}
.12 months { backside: 0; proper: 13px; width: 20px; top: 60px;}
.m-01 { background-position: Zero 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 { background-position: -100px -91px;} .d-21 { background-position: -100px -122px;} .d-22 { background-position: -100px -151px;} .d-23 { background-position: -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;}
Clarification:
.postdate – Units the width and top of your complete date. On this case we’re going to make our date match right into a field 66px by 60px.
.month, .day, .12 months – Units the width and top of the person components that make up our complete date Sprite. Our months and days are 33px broad by 30px excessive. The years are 33px broad by 60px excessive. Whenever you put these components collectively they make a field 66px broad by 60px excessive. It additionally attaches the graphic we made in step #1 so we are able to place it for every particular person factor within the Sprite.
.m-01 by means of .m-12 – You guessed it! These are our months. This a part of the CSS positions our graphic to show the months. As you’ll be able to see I set the picture to maneuver on an X Y axis based mostly on the place it seems on the picture. The simplest manner to determine the place the highest left nook (0,0) of every month, day, or 12 months is on the bigger picture is to open up Photoshop and choose the Marquee software. Choose from the highest left down and over to the fitting to only above the highest left nook of you month, day or 12 months and be aware the place your pointer is utilizing the information panel’s stats.
.d-01 by means of .d-31 – Is used for precisely the identical factor as .m-01 – .m-12 besides their used for the times somewhat than the months.
.y-2009 by means of .y-2014 – Similar as above solely we use them for the years.
Step #4
Open up the loop in WordPress. The loop in WordPress is the web page(s) that show(s) your weblog posts. That is often the index.php web page. Dates present up on different pages too however this tutorial solely replaces the dates in the principle loop. For those who bought to this part of the tutorial you’re clever sufficient to hunt and change the opposite situations of dates in your theme in different information akin to single.php, web page.php, archives.php and so on.
Seek for one thing alongside this line in your loop:
Substitute with these strains:
Step #5
Add your picture, CSS, and your themes’ loop (index.php). Hit refresh in your weblog (be sure to are on the web page that posts are proven on) and Voila! You simply tremendous styled your dates utilizing CSS sprites.
