Fancy post date boxes for Twentyten theme

  • I’m using a customized version of the Twentyten theme on my site and I’d like to have those fancy post date boxes that many templates are using nowadays, such as iDream. I don’t need it to be too fancy with custom backgrounds, I just want to know how to format it in my PHP and CSS files.

    I tried incorporating the main loop from iDream into my Twentyten theme and it doesn’t work properly.

    I’d appreciate a little help.

Viewing 1 replies (of 1 total)

  • It’s done with CSS absolute positioning. Basically you create a div to hold the date, fill it in using the_date, then position it relative to the post div.

    Here is the exact HTML and CSS code taken from the iDream template, so you can get an idea of how they did it. The purpose of div.postmeta2 is to create a positioning context for div.meta2inner (that is, meta2inner is positioned relative to postmeta2). The rest is straightforward HTML/CSS.

    <div class="postmeta2">
    <div class="meta2inner">
       <div class="pday">2</div>
       <div class="pmonth">Apr/10</div>
    </div>
</div>
    div.postmeta2 {
	display: block;
	position: relative;
}
div.postmeta2 div.meta2inner {
	display: block;
	position: absolute;
	height: 70px;
	width: 58px;
	background-image: url(images/datebg.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	color: #FFFFFF;
	left: -34px;
	top: -0px;
}
div.postmeta2 div.meta2inner div.pday {
	text-align: center;
	display: block;
	padding-left: 4px;
	font-size: 26px;
	font-weight: bold;
	padding-top: 8px;
}
div.postmeta2 div.meta2inner div.pmonth {
	text-align: center;
	display: block;
	padding-left: 4px;
	font-size: 12px;
	font-weight: bold;
	padding-top: 0px;
}
Viewing 1 replies (of 1 total)
  • The topic ‘Fancy post date boxes for Twentyten theme’ is closed to new replies.