But since we're on the subject of the date header. Have you been able to figure out (or maybe seen somewhere) how people add the caledar icon next to the date header?
It's usually a graphic behind the month and date to the left of the date header. Like:
JAN
---
10
WOW, this was not an easy task. At least for me. Sometimes it is just an uphill struggle. But, I stuck with it and won.
Of course, I found help from two places: Orangevolt for the calendar code and Euphorish for the icons, which I resized to fit this code. Many thanks to them for all their work. You can read about it on their site, or follow the instructions that I've simplified below.
So, let's get started.
- Open the Dashboard | Settings | Formatting
- Locate the Date Header Format and set it to YYYY-MM-DD (2008-01-12)
- Save settings.
- Open the Dashboard | Template | Edit HTML.
- Check the Expand Widgets Template box.
- Find the <head> tag and paste the following code under it:
<!-- orangevolt calendar widget -->
<script src='http://anniebluesky.googlepages.com/fastinit.js'/>
<script src='http://anniebluesky.googlepages.com/prototype-1.5.0.js'/>
<script src='http://anniebluesky.googlepages.com/orangevolt-calendar.js'/>
<link href='http://anniebluesky.googlepages.com/calendar.css' rel='stylesheet' type='text/css'/>
<!-- end calendar widget -->
Next you will locate this code in your template: <data:post.dateHeader/> and replace it with:
<h2 class='date-header'>This is pretty painless, isn't it. Last step. This is where you can customize the font used, color of font, float the icon to the left or right, and where you add your calendar image. In the CSS Style Sheet, add this code:
<data:post.dateHeader/>
</h2>
/* CalendarIf you have a calendar icon upload it to your webhost (I use Ripway). Put your Calendar Image.URL in the above code. Or, download this set of icons and take your pick. It looks like candy!! This set of calendar icons will make your blog POP!
----------------------------------------------- */
span.cal {
background:transparent url('CALENDAR IMAGE. URL') no-repeat scroll 0%;
float:left;
height:49px;
width:48px;
font-family:"Trebuchet MS",Tahoma,Arial;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
margin-right: 13px;
}
span.cal_month {
color:#FFFFFF;
display:block;
font-size:11px;
line-height:11px;
margin-left:-3px;
padding-top:2px;
text-align:center;
text-transform:uppercase;
}
span.cal_day {
color:#999999;
display:block;
font-size:18px;
line-height:18px;
margin-left:-3px;
padding-top:8px;
text-align:center;
text-transform:uppercase;
}
next to their names. No more comment spoofing.