WordPress.org

Ready to get started?Download WordPress

Forums

Fancy post date boxes for Twentyten theme (2 posts)

  1. M.D. Roche
    Member
    Posted 3 years ago #

    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.

  2. ambrosite
    Member
    Posted 3 years ago #

    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;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic