Dynamic Post Date Icon


Author Message
Scott Jay

Posted: 3/8/2012
Quote message 

I'd like a post date icon that has the actual date in a square beside each post. Is there a way to do that with Artisteer?
 
Scott Jay

Posted: 3/9/2012
Quote message 

Abland? Anyone?
 
Scott Jay

Posted: 3/14/2012
Quote message 

Hmmm.. It must be doable since I see sites with a date icon that corresponds to the actual post date. Can't anyone help?

Scott
 
Abland

Posted: 3/15/2012
Quote message 

Hi, Scott Jay,

I took from the following link as reference:
http://justfreetemplates.com/blog/2010/01/09/262.html
Scroll down to the last (3rd) example, and right-click save the image (fulldate.jpg) and place in your theme's "images" folder.

In your theme create a folder "templates" (not neccessary but I do this to keep things neat and it applies to the code below), and in that new folder create the new file "full-date.php".

Copy the html from the linked example into the new file, but with some conditionals to keep the new date icon off pages:
<?php if (is_page()) { } else { ?>

<div class="date">
<div class="date-month"><?php the_time('M'); ?></div>
<div class="date-day"><?php the_time('d'); ?></div>
</div>
<?php } ?>

Next, copy the css from the example into your theme's "style.css", but with a few edits. The first four lines are added to ".date", and the image is referenced from the "images" folder:
.date {

position: relative;
display: inline;
float: left;
margin: 0 5px 5px 0;
background:#fff url('images/fulldate.jpg') repeat-x scroll top left;
width:60px;
height:60px;
text-align:center;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
text-transform:uppercase;
}
.date .date-day {
color:#333;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:35px;
}
.date .date-month {
font-size:11px;
font-weight:bold;
}

Finally, in "library/wrappers.php" find the following approximately line 42:
 echo $before;echo $thumbnail;

?>
<div class="art-postcontent">
<!-- article-content -->
<?php echo $content; ?>
<!-- /article-content -->
</div>
<div class="cleared"></div>
<?php
echo $after;

Add "get_template_part('templates/full','date');" before "echo $content;":
 echo $before;echo $thumbnail;

?>
<div class="art-postcontent">
<!-- article-content -->
<?php get_template_part('templates/full','date');echo $content; ?>
<!-- /article-content -->
</div>
<div class="cleared"></div>
<?php
echo $after;

 
Scott Jay

Posted: 3/15/2012
Quote message 

Thank you so much! I bow to your prowess!

No for a bit of positioning and I'll be all set!

Thanks again!

Scott
 
Scott Jay

Posted: 3/15/2012
Quote message 

Here is the site BTW - http://174.120.202.155/~senatore/

I have a issue that I might need your assistance with.

On single posts there are two date icons. I had the date icon turned on when I created the theme in Artisteer and I don;t want to replace the theme and overwrite all the changes I made. I've been trying to find where the post date icon is added to the page. I might get it figured out, but just in case some help would be appreciated.

Thanks again Abland!

Scott
 
Abland

Posted: 3/16/2012
Quote message 

Hi, Scott Jay,

Looks good :-). To remove the date icon on single posts, in your theme's "content-single.php", it's usually in:
'before' => theme_get_metadata_icons('edit,date', 'header'),

Remove " ,date "

I notice your share links are added twice, too. This might be related:
http://www.artisteer.com/Default.aspx?post_id=159519&p=forum_post
 
Scott Jay

Posted: 3/19/2012
Quote message 

I tried editing the content-single.php file and it didn't work. I don't think the second occurrence of the date block is related to the current post. I think it is associated with the next/previous post link. Not matter what length the post is the second (bottom) date block is always in the same line as the next/previous links.

Ha! Thanks for picking up on the AddThis button. We actually want it to be there twice in case it is a really long post.

Thanks again Abland!
 
Daniel Vargas

Posted: 3/22/2012
Quote message 

Hello guys! I´been following all your instructions and the problem I have is that the date icon appears in ALL headers! Any ideas?

thanks!
 
Piotr

Posted: 5/28/2012
Quote message 

How to apply this trick to joomla templates?

thanks.
 
Lynn

Posted: 4/23/2014
Quote message 

Is there a way to have the date icon located in the post titles on the left instead of in the content?
 
Eileen
Artisteer Team

Posted: 4/24/2014
Quote message 

Hi Lynn,
if I understand you properly you may change the align of the post header icons (including the date icon) under Content ribbon > Post Header > Text > Font Options > Paragraph
 
Kelsey

Posted: 6/2/2014
Quote message 

How does this integrate to Blogger??