• smush

    (@smush)


    Hi I’ve used some CSS to style the date next to each blog entry as in Twentyten theme it is just plain text. However whatever I seem to do it stretches it wider than specified in code.

    Please click here to see image to understand what I mean

    The CSS I am using is as follows:

    .calendar {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.4);
        -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
        background: #ebebeb;
        border: 1px solid #555555;
        font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
        float: left;
        margin-right: 20px;
        width: 41px;
        height: 47px;
        font-size: 12px;
    }
    .calendar > span {
        display: block;
    }
    .calendar > .month {
        -moz-border-top-left-radius: 3px;
        -moz-border-top-right-radius: 3px;
        -webkit-border-top-left-radius: 3px;
        -webkit-border-top-right-radius: 3px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        background: #53A4E6;
        border-bottom: 1px solid #555555;
        font-weight: bold;
        padding: 0 2px 0 2px;
        text-align: center;
        color: #ffffff;
        line-height: 1.5;
    }
    .calendar > .day {
        -moz-border-bottom-left-radius: 3px;
        -moz-border-botton-right-radius: 3px;
        -webkit-border-bottom-left-radius: 3px;
        -webkit-border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
        background: #f6f6f6;
        padding: 2px 0 2px 0;
        text-align: center;
        font-weight: bold;
        font-size: 18px;
        color: #000000;
        line-height: 1.3;
    }
    .entry-title {
           clear: right;
    }

    I have placed the code in the loop.php file in the location:

    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="calendar">
        <span class="month"><?php the_time("M", get_option('date_format')); ?></span>
        <span class="day"><?php the_time("d", get_option('date_format')); ?></span>
    </div><!-- calendar -->
    			<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

  • The topic ‘How to stop CSS blog date from streching Twentyten’ is closed to new replies.