Support » Theme: Reddle » Adding year to date circle

Viewing 3 replies - 1 through 3 (of 3 total)
  • This is pretty difficult, because the design doesn’t account for the year in the circle. But, it’s all CSS (the design, I mean) so it’s easy to tweak.

    First thing, I’d suggest you add the date to the byline “posted by … on (date)” so it’s obvious what year.

    Look for reddle_posted_on and replace with something like:

    function reddle_posted_on() {
    	printf( __( '<span class="byline">Posted by <span class="author vcard"></span> on %4$s</span>', 'reddle' ),
    		esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
    		esc_attr( sprintf( __( 'View all posts by %s', 'reddle' ), get_the_author() ) ),
    		esc_html( get_the_author() ),
    		esc_html( get_the_date() )

    This adds the date to the output, after the author name.

    Next, if you want to add the year to the circles …

    1. Find 3 cases of <p class="date-link"> and add in the year:

    <p class="date-link">" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'reddle' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark" class="permalink"><span class="month"><?php the_time( 'M' ); ?></span><span class="sep">·</span><span class="day"><?php the_time( 'd' ); ?></span><span class="year"><?php the_time( 'Y' ); ?></span></p>

    2. Find “datestamps” area in your CSS file, and try something like this:

    /* Datestamps */
    .permalink .sep,
    .permalink-sep {
    	display: none;
    footer .permalink,
    .image-attachment #content footer .permalink {
    	background: #000;
    	border-radius: 50%;
    	color: #eee;
    	font-family: Georgia, "Bitstream Charter", serif;
    	font-style: italic;
    	line-height: 1;
    	margin: 0 0 0 -27px; /* Shuffle the datestamp over half it's fixed width */
    	position: absolute;
    		top: -1.2em;
    		left: -11.674008810573%; /* and position it on the edge of the fluid page  */
    	text-align: center;
    	width: 75px;
    	height: 75px;
    .secondary footer .permalink {
    	left: -24.090909090909%; /* and position it on the edge of the fluid page  */
    footer .permalink .month {
    	display: block;
    	font-size: 12px;
    	padding: 10px 0 0;
    footer .permalink .day {
    	display: block;
    	font-size: 18px;
    	padding: 4px 0 0;
    footer .permalink .year {
    	display: block;
    	font-size: 14px;
    	padding: 4px 0 0;

    Thanks so much for taking the time to do this Lance – all seems to work and have now go the year in the circles. Yay!


Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Adding year to date circle’ is closed to new replies.