As promised, I’m now going to teach you guys how to code your Date icon.
In order to make this icon into code, you need to understand what will happen. What we’re going to do is use divs to align the Month, and the Date inside another div with a background. The background image will be our date icon, and we’ll use CSS to overlay our text where it belongs.
Now, for this tutorial, I’m going to assume you already know a bit of xhtml and CSS.
Step one.
First, you need to save your date icon image. Now, make sure you save it, without the text visible. Remember, we’re coding this into wordpress so that it automatically updates itself with every post, rather then manually by saving a new image. So, we need to remove the text first.
Step Two.
Now, we’ll lay out the base structure. Following the wise words of Small Potato, type out all the code, don’t copy and paste.
<div class=’post-date’>
<div class=’month’><?php the_time(’M') ?></div>
<div class=’day’><?php the_time(’d') ?></div></div>
Remember, you should have typed that out.
Now, explaining each part.
- <div class=’post-date’> : This opens our starting div, called post-date. This will have our background image, once we move onto the CSS.
- <div class=’month’> : This opens our month div, called month. This will hold our Post’s Month.
- <?php the_time(’M') ?> : This is a php tag. Using Wordpress’s system, it calls up the time of the post made (the_time), and writes it as a month ((’M')).
- </div> : Ends our Month Div.
- <div class=’day’> : This opens another div, called Day. This will hold our Post’s Date.
- <?php the_time(’d') ?> : This is another php tag. Again, using wordpress’s own system, it calls up for the time of the post made (you should remember the code used if you typed it out), and writes it as a date ((’d')).
- </div> : This ends our Day Div.
- </div> : This ends our post-date div.
If you were to look at your wordpress page, all you would see now beside the posts shown is the Month, and the date underneath it.
Step Three.
Now, that’s our date icon laid out, tableless, and web-standards compliant. But, it’s nothing special, so we need to style it.
In this step, we’ll set up our background image. It should be saved into your template path, under ‘images/background.jpg’, or something similar.
We need to open our style sheet, and add in #post-date{}.
Inside post date, type in the following code:
- margin: 0 0 0 0;
- width: 53px; (This should be the width of your date icon, if it’s different from mine.)
- height: 53px; (This should be the width of your date icon, if it’s different from mine.)
- background: url(’images/date.jpg’) no-repeat;
- font-family: verdana, sans-serif;
- color: #ffffff;
- font-size: 14px;
- font-weight: bold;
- text-align: center;
Now, what each of these do..
- margin : sets the outside margins on our div.
- width: sets the width of our div.
- height: sets the height of our div.
- background: places a background image in our div, as well as setting it so it does not repeat.
- font-family: sets the font face.
- color: sets the font color.
- font-size: sets the font size.
- font-weight: sets the font weight.
- text-align: sets the alignment of the text.
Now, looking at your date icon, it should have your text centered (we’re almost aligned!), it should be white, and have your date icon image now appearing.
Next, we need to add a bit of spacing to the top of each piece of text in order to space it out properly. We’ll do this using margins.
Step Four.
Now, inside your style sheet, we’ll add in a #month{} class, and a #day{} class.
Inside #month type in:
- margin: 4px 0 0 0;
Now, what this does is add a 4px margin to the top of our text, which moves it down 4px. This is starting to align up the way we wanted! Now, if you look, your white text is now blending into the white box, and isn’t aligned properly either. So we need to bump it down more, and change the color. So, inside #day we’ll type in:
- margin: 6px 0 0 0;
- color: #3888e1 ;
This will push our date numbers down 6more pixels (by adding a 6px margin to the top), and it will change the font color to blue. Now, our date icon is complete!
Remember, you can change any variable in order to re-align the text, and move them in different areas. Different date icons, will require different work. 
After being requested by email 3 times…
Just so you guys know, this was coded for wordpress obviously. But if you want to use it on a regular web page, simply switch out the Month, and Date codes, and replace them with static Text. Or, you can replace that code with a php include from another blogging system.
OMGz, UNR, you half a WP help site.
I used tables on my dates like a dumbass, but it’s cool that you’re giving back/doing stuff.
Haha, don’t use tables! that’s terrible!
Let me know anytime if you need help with wordpress drax, I’m always willing.
Wow! What a great tutorial!
Hi! I’m John Strass and i like your site!
Thank you!
[...] Tutorials: CSS Date Blocks for Blogs Creating a Blog Entry Date Calendar Icon Look with CSS Coding a Date Icon with xhtml and css. Web 2.0 Date Icons For Your Blog Create a ‘Calendar style’ Wordpress date format WordPress Date [...]