Making post dates look better (css)
-
Hey, can anyone give me some pointers how to achieve entry dates like here: http://veerle.duoh.com/ ?
-
Do you mean the little calendar icon? Or just the text?
These two should help you with the text:
http://codex.wordpress.org/Template_Tags/the_date
http://codex.wordpress.org/Template_Tags/the_timeAnd if you wanted the little calendar icon, you’d have to add the image as a background to one part, add the text on top, then add the year / time underneath the title. I’ve only ever done stuff like that with tables but it’d be basically
<table><tr><td background=calendarpic text-align=center><?php the_date(formated for month and day) ?></td><td><?php the_title ?><?php the_date(just-the-year) ?> at <php the_time()?></td></tr></table>
Main entry text.Something like that anyway. But i’ve no idea how to do that with css / div’s yet :oP
Yeah I wish there was some css help with that.
This is the code I use for a similar effect.
In the post header(whatever it’s called in your theme) I put
<div class="time"> <div class="month"><?php the_time('M ') ?></div> <div class="day"><?php the_time('j ') ?></div> <div class="year"><?php the_time(' Y') ?> </div> </div> And the css I currently use .time { float: left; background: #545363; width: 45px; color: White; text-align: center; margin-right: 6px; padding-bottom: 3px; border: 1px solid Black; } .month { color: #ABAC9C; font-variant:small-caps; border-bottom: 1px solid #B0C4DE; background: Black; font-size: 110%; }
If you wanted an actual calendar image in the .time class I would add something like url(images/calendar.gif) fixed to the background selector of course pointing to the directory and the correct image name.
incertus:
Thank you in advance for you help!!
My page: http://sunruby.com/make-friends/
Where exactly do I insert that code so that the icon is right to the left of the post heading?…………………..
.time {
float: left;
background: #545363;
width: 45px;
color: White;
text-align: center;
margin-right: 6px;
padding-bottom: 3px;
border: 1px solid Black;}
.month {
color: #ABAC9C;
font-variant:small-caps;
border-bottom: 1px solid #B0C4DE;
background: Black;
font-size: 110%;
}
…………………..
The above code goes in “style.css”, but in which sectin (eg: /* main structure */, /* pagelist and search */, etc)?……………
<div class=”time”>
<div class=”month”><?php the_time(‘M ‘) ?></div>
<div class=”day”><?php the_time(‘j ‘) ?></div>
<div class=”year”><?php the_time(‘ Y’) ?> </div>
……………..
The above code goes in my “index.php”, but where? Below is the index.php<?php get_header(); ?>
<div id=”content-ad”>
<?php include (TEMPLATEPATH . ‘/ads.php’); ?>
<div id=”text”>
<?php include (TEMPLATEPATH . ‘/banner.php’); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class=”post” id=”post-<?php the_ID(); ?>”>
<h2>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></h2><div class=”pub”>
Posted onby <?php the_author(); ?> in <?php the_category(‘, ‘) ?><?php edit_post_link(‘, Edit’); ?>
</div>
<?php the_content(‘Read the rest of this entry »’); ?>
<div class=”comm”><?php comments_popup_link(‘Post Comment’, ‘Comments (1)’, ‘Comments (%)’); ?></div>
</div>
<?php endwhile; ?>
<div id=”nav”>
<div class=”alignleft”><?php next_posts_link(‘« Previous Entries’) ?></div>
<div class=”alignright”><?php previous_posts_link(‘Next Entries »’) ?></div>
</div>
<?php else : ?>
<div class=”post”>
<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn’t here.</p>
</div>
<?php endif; ?>
</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
- The topic ‘Making post dates look better (css)’ is closed to new replies.