Viewing 4 replies - 1 through 4 (of 4 total)
  • 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_time

    And 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

    Thread Starter raykart

    (@raykart)

    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 on

    by <?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(); ?>

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Making post dates look better (css)’ is closed to new replies.