Annie over at BlogU has a super article on how to use a Calendar Icon as your post date header. I mucked around with this for a while tonight and discovered that while I could get the month and day to appear I could not for the life of me get the calender image to upload. After fooling around with it some more I fixed this by removing the existing calendar code in my template.
Next came the icons .... not my favorite thing. Sorry, people of Weta. Now I mean no offense to Annie or whoever designed these, but the artist in me took over and I had to make my own. I noticed a comment on Annie's blog about there being no year on the calendar, since the code only allows for the month and day. I fixed this by adding the year as part of the graphic.
If you happen to cruise by here and read this post and would like some cool calendar icons then please feel free to grab mine (the zip file includes calendar icons for the years 2008, 2009, and 2010) ...
The calendar code below goes in between your <head> tags, which is usually located between the <b:skin><![CDATA[/* and ]]></b:skin> tags in your template. Also if you use my icons remember to change the size for the image, which is highlighted in yellow below:
Update: Smashing Magazine is now offering my calendar icons for the year 2009 and 2010, which you can check out here.
Next came the icons .... not my favorite thing. Sorry, people of Weta. Now I mean no offense to Annie or whoever designed these, but the artist in me took over and I had to make my own. I noticed a comment on Annie's blog about there being no year on the calendar, since the code only allows for the month and day. I fixed this by adding the year as part of the graphic.
If you happen to cruise by here and read this post and would like some cool calendar icons then please feel free to grab mine (the zip file includes calendar icons for the years 2008, 2009, and 2010) ...
In order to get the calendar image to appear I had to remove the following from my template code...
h2.date-header {After studying it for a while it occurred to me that the original template code for the date was interfering with the calendar code; so I simply removed any code reference to that and viola! - it worked.
margin: 0;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 0;
padding-$startSide: 18px;
text-transform: uppercase;
color: $dateHeaderColor;
background: url() no-repeat;
font-size: 80%;
font-weight: normal;
}
.date-header span {
margin-top: 0;
margin-$endSide: 0;
margin-bottom: 0;
margin-$startSide: 5px;
padding-top: 0;
padding-$endSide: 25px;
padding-bottom: 0;
padding-$startSide: 25px;
background: url() no-repeat $startSide 0;
}
The calendar code below goes in between your <head> tags, which is usually located between the <b:skin><![CDATA[/* and ]]></b:skin> tags in your template. Also if you use my icons remember to change the size for the image, which is highlighted in yellow below:
/* CalendarYou also have to adjust the padding for the date so there will be some space between it and the "year" in the graphic (I found that 12px was sufficient):
----------------------------------------------- */
span.cal {
background:transparent url('http://dougcloud.net/show/brown1.png') no-repeat scroll 0%;
float:left;
height:49px;
width:53px;
font-family:"Trebuchet MS",Tahoma,Arial;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
margin-right: 10px;
margin-left: 10px;
}
span.cal_day {I hope you enjoy the icons and if you have any feedback or questions just post them here.
color:#999999;
display:block;
font-size:18px;
line-height:18px;
margin-left:-3px;
padding-top:12px;
text-align:center;
text-transform:uppercase;
}
Update: Smashing Magazine is now offering my calendar icons for the year 2009 and 2010, which you can check out here.
Very cool indeed Doug :D
I have download it!
Hope you will always be generous to post more interesting freebies next time ;)
Hey Doug,
Awesome blog. Didn't know about it. Also really cool Calendar icons.
Matt, thanks for dropping by. I figured I should rework my forum signature so people would know it existed, lol.
I like your designs, your blog site is awesome.
Thanks, Mom :)
Nice advice....Thanks.
Smile!
I have just updated the above article with a link to Smashing Magazine, who were generous enough to offer my calendar icon sets for 2009 and 2010. Thanks guys!
but, you have not mentioned where to place in the html box
cool thanks
Sorry folks - I forgot to add where the code goes. I also updated the post to include some other info.
thank you so much
Nice coding. I am looking for same kinda coding from many days. Thanks for sharing with me.
i think i commented but it doesnt seem to have shown up... how does this thing work if the year is fixed. like if the year changes, how am i supposed to change the icon without interfering with last yr's icon!
thanks :)
If you change the calendar icon to the year you want then how could it interfere with the previous year?
i don't understand! the calendar icon goes into the template, does it not? doesn't that mean that any date will appear as an icon that says 2010???
perhaps i am doing this wrong :/
Hello and welcome to TBODC! If you like the article you just read you can subscribe here to get updates via RSS or opt to have them sent directly to your inbox. I appreciate your feedback so please feel free to ...
Post a Comment