CODEWITHSUNDEEP
phphtmlcsswordpress
Shiva
Shiva

Reputation: 321

How to customize the appearance of datestamp in Wordpress?

Please check this website: http://vabbie.com/

The website is in Wordpress. The datestamp at the left side of post is very generic looking. I want to convert it into the following style:

enter image description here

The numeric part is big and indendted on the left side. The "October" part is OCT and year 2012 below it.

I am using the following php code for datestamp:

<div id="time"><?php the_time('F j, Y') ?></div>

But I am not sure how to style it.

Anyone with Wordpress knowledge help please?

Thanks!!

Upvotes: 3

Views: 669

Answers (2)

Brifeb
Brifeb

Reputation: 186

here is the code, along with CSS

<style>
.post-date {
    float:left;
    font-size: 30px;
    margin:5px;
    color: #999;
    font-weight:bold;
}
.post-monthyear {
    float:left;
    font-size: 14px;
    line-height:12px;
    color: #999;
    border-right: 1px solid #999;
    margin-right: 5px;
    padding-right: 10px;
}
</style>    
<div class="post-date"> <?php echo the_time('j') ?> </div>
<div class="post-monthyear"><?php echo the_time('M') ?> <br/><?php echo the_time('Y') ?> </div>

Around the tag is the CSS, you can include on the index.php or you can paste to the css file. just play with the CSS for styling..

Hope it help..

Upvotes: 3

kittycat
kittycat

Reputation: 15045

It uses the same format that the PHP date function uses:

Check out the format table and choose the appropriate characters to get the desired output as documented.

echo '<div id="time"><span>' . the_time('j') . '</span><span>' . the_time('M') . '<br />' . the_time('Y') . '</span></div>';

To start you off =o) just style the SPAN so one floats to the side and then style the font etc all with CSS.

Upvotes: 3

Related Questions